나는 텍스트와 이미지를 모두 포함하는 3 div 있습니다.플로트 왼쪽, 가운데 및 플로트 오른쪽 3 div 같은 줄에

왼쪽에는 1 번째로 div, 뒤쪽에 2 번째는 div, 오른쪽에는 3 번째로 div이 표시됩니다. 나는 div과 3 번째 div에 CSS를 사용할 수 있습니다. 2 번째 div은 문제가됩니다. 지금까지 추적 코드를 가지고 :

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
     .onLeft { 
      display: inline; 
      float: left; 
     } 
     .onRight { 
      display: inline; 
      float: right; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="onLeft"><h3>Left</h3><img src=images/left.png></div> 
     <div class="onCentre"><h3>Centre</h3><img src=images/centre.png></div> 
     <div class="onRight"><h3>Right</h3><img src=images/right.png></div> 
    </body> 
</html>

어떤 제안을?

출처

2016-06-01 pat

특별히 그런 수레를 사용해야합니까? 그냥 부유시킬 수 없습니까? 왼쪽; 그들 모두 (그래서 그들은 한 줄씩 차례로 나아 간다)? 또는 flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/, align-items : stretch를 찾으십시오)를 사용해보십시오. –

세 개의 div에 모두 'float : left'를 추가하십시오. 또는, 어떤 사람들은 내게이 제안을하기 위해 비명을 지르고, 한 줄의 테이블 ('tr')을 만들고 내부에 각 이미지가 들어있는 세 개의'td' 태그를 넣을 것입니다. –

조금만 더 명확하게하겠습니다. 3 div가 웹 페이지의 왼쪽, 가운데 및 오른쪽에 모두 같은 수평선에 위치하도록하겠습니다. 표가 작동하지 않습니다. – pat

나는 가변 폭을 따라서

가질 수있는 3 사업부로 수정 폭을 갖고 싶어하지 않습니다 display:table/table-cell 을 설정 한

옵션을

section { 
 
    display: table; 
 
    width: 100% 
 
} 
 
article { 
 
    border: 1px red solid; 
 
    display: table-cell; 
 
}

<section> 
 
    <article>article 1</article> 
 
    <article>article 2</article> 
 
    <article>article 3</article> 
 
</section>

옵션 2

는 display:flex

section { 
 
    display: flex; 
 
} 
 
article { 
 
    border: 1px red solid; 
 
    flex:1 
 
}

<section> 
 
    <article>article 1</article> 
 
    <article>article 2</article> 
 
    <article>article 3</article> 
 
</section>

출처

2016-06-01 16:33:25 dippas

3 div가 가변 폭을 가질 수 있으므로 고정 폭을 갖고 싶지 않습니다. – pat

너비가 알 수 없기 때문에 너비를 고정하는 것은 실용적이지 않습니다. 화면이 전체 너비보다 넓 으면 오른쪽에 공백이 생기고 세 번째 div가 모두 오른쪽에 놓 이도록하십시오. – pat

위의 옵션 중 대부분의 옵션은 안전하게 제거 할 수 있습니다. 단지 데모 용으로 사용합니다. 목적. – dippas

그래서 귀하의 요구 사항은 세 가지 div의 왼쪽 페이지의 각 부분에 확산하는 것입니다 설정 ce 너와 맞아. 당신은 실제로 열 레이아웃을 찾고 있지 않습니다. 추가 div를 사용하여이 작업을 수행 할 수 있습니다. 이 작업을 수행하는 한 가지 방법 인 jsfiddle 링크를 확인하십시오.

.onLeft { 
    display: inline; 
    float: left; 
    width: 30%; 
    background-color: #ccc; 
} 
.onCentre { 
    float: left; 
    width:40%; 
    background-color: red; 
} 
.realCentre { 
    margin: 0 auto; 
    width: 90%; 
    background-color: #efefef; 
} 

.onRight { 
    display: inline; 
    float: right; 
    width: 30%; 
    background-color: #ddd; 
}

출처

2016-06-01 16:34:34 TeaCode

첫 번째 div와 두 번째 div가 함께 붙습니다. – pat

@pat Ok. 요구 사항이 약간 다릅니다. 나는이 효과를 얻기 위해 약간의 속임수를 쓸 수있는 방법을 보여주는 jsfiddle 링크로 나의 대답을 업데이트했다. – TeaCode

내 제안은 플로팅 대신 인라인 블록을 사용하는 것입니다.

CSS :

div {display: inline-block} 
.onLeft {width: 30%} 
.onCenter {width: 40%} 
.onRight {width: 30%}

출처

2016-06-01 16:35:49 K48

플로트 왼쪽, 가운데 및 플로트 오른쪽 3 div 같은 줄에

답변

옵션을

`section { display: table; width: 100% } article { border: 1px red solid; display: table-cell; }`

`<section> <article>article 1</article> <article>article 2</article> <article>article 3</article> </section>`

옵션 2

플로트 왼쪽, 가운데 및 플로트 오른쪽 3 div 같은 줄에

답변

옵션을 section { display: table; width: 100% } article { border: 1px red solid; display: table-cell; } <section> <article>article 1</article> <article>article 2</article> <article>article 3</article> </section>

옵션 2

관련 문제

옵션을

`section { display: table; width: 100% } article { border: 1px red solid; display: table-cell; }`

`<section> <article>article 1</article> <article>article 2</article> <article>article 3</article> </section>`