3 колонки с плавающей точкой слева и одинаковой шириной на весь экран - PullRequest
Новая
       1

3 колонки с плавающей точкой слева и одинаковой шириной на весь экран

2 голосов
/ 25 октября 2011

У меня полноэкранная компоновка, и мне нужны 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 без поплавка и шириной 100% работает нормально.

Разве это невозможно сделать с помощью divs? Должен ли я использовать таблицу для этого?

Ответы [ 3 ]

3 голосов
/ 25 октября 2011

Вам нужен div с установленным на table дисплеем, обернутым вокруг p с.

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"> должен иметь установленную ширину, чтобы это работало.

Демонстрация для вас здесь .

0 голосов
/ 25 октября 2011

Попробуйте этот код может быть полезным для вас. Вы можете изменить свойства стиля в соответствии с вашими потребностями. 

<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>

Спасибо.

0 голосов
/ 25 октября 2011 
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...