플로트가 왼쪽이고 전체 화면에서 동일한 너비의 3 열

전체 화면 레이아웃이 있으며 원하는 너비가 3 열이며 부동입니다. 플로트없이 100 폭 %가 잘 작동과플로트가 왼쪽이고 전체 화면에서 동일한 너비의 3 열

<div class="table_small" style="float:left; margin-right:20px;"> 
<p>lipsum</p></div><div class="table_small" style="float:left; margin-right:20px;"> 
<p>lipsum</p></div><div class="table_small" style="float:left;"><p>lipsum</p></div>

한 사업부 :

은 무엇 내가 가진 것은 이것이다.

div와 함께 할 수 있습니까? 이 테이블을 사용해야합니까?

출처

2011-10-25 Leon van der Veen

가능하지만이 html이 이상합니다. 나는 당신에게 간단한 예를 만들 것이다 :) – Kyle

질문하기 전에 중복 물체를 찾아야한다 : http://stackoverflow.com/search?q=%5Bhtml%5D+3+collumn+layout&submit=search – ANeves

작은 팁 , 당신은 정말 눈금을 보이지 않는다면 당신은 테이블 태그를 사용하지 마십시오. 테이블을 사용하여 레이아웃을 작성하지 마십시오. div3을 사용합니다. –

당신은 당신의 p의 감싸 table에 자사의 디스플레이 설정 한 div이 필요합니다.

HTML

<div class="table_small"> 
    <p>lipsum</p> 
    <p>lipsum</p> 
    <p>lipsum</p> 
</div>

CSS :

이

.table_small 
{ 
    width: 100%; 
    display: table; 
} 

.table_small p 
{ 
    display: table-cell; 
    border: 1px dashed #000; 
}

요소 <div class="table_small">이에 대한 일련의 폭이 있어야 부모가 작동합니다.

Demo for you here.

출처

2011-10-25 09:42:45 Kyle

Thnx 이것이 일을한다! –

<div class="row"> 
    <div class="column1" style="float:left; left:0px; width:33%"></div> 
    <div class="column2" style="float:left; left:33%; width:33%"></div> 
    <div class="column3" style="float:left; left:66%; width:33%"></div> 
</div>

출처

2011-10-25 09:42:11 juankysmith

이것은 3 열로 제한된 경우에만 작동합니다. – Kyle

그는 말했다 : 나는 같은 너비로 3 개의 칼럼을 갖고 떠 있어야한다. – juankysmith

나는 그것을 본다. 그러나 그가 미래에 3 개 이상의 칼럼을 가지기로 결정한다면, 그는 문제가 생길 것이다. 또한, 왜 떠 다니고 위치가 어떨까요? 둘 중 하나가 작동합니다. 요소를 부동 상태로 설정하면 위치가 자동으로 설정됩니다. – Kyle

이 코드를 사용해보십시오. 필요에 따라 스타일 속성을 수정할 수 있습니다.

<html> 
<body style="width:100%; margin:0px;"> 
<div class="table_small" style="float:left; margin:0 10px; border:1px solid; width:31.7%;"> 
<p>lipsum</p></div> 
<div class="table_small" style="float:left; margin:0 10px; border:1px solid; width:31.7%;"> 
<p>lipsum</p></div> 
<div class="table_small" style="float:left; margin:0 10px; border:1px solid;width:31.7%;"><p>lipsum</p></div> 
</body> 
</html>

감사합니다.

출처

2011-10-25 09:50:33 pinaldesai

플로트가 왼쪽이고 전체 화면에서 동일한 너비의 3 열

답변

관련 문제