CSS-оболочка с отступами

Question

У меня довольно неприятная проблема. Я должен сделать «стол», который содержит 3 элемента рядом друг с другом. Первые 2 элемента - это простые div, плавающие влево, но третий немного сложнее. Он должен иметь прокладки с каждой стороны. Кстати, это текст, который можно обернуть к концу строки. Моя проблема в том, что когда этот элемент разрывается в конце первой строки и в начале второй строки не имеет атрибутов заполнения.

Я сделал страницу простого примера здесь.

У вас есть какие-нибудь решения для меня? Я пробовал так много разных способов ... Когда пространство рядом с третьим элементом пусто, это нормально, но когда я добавляю квадраты, оно полностью разбивается.

Answer 1

Нужна ли вам ширина, чтобы быть динамической, или она может быть фиксированной по размеру?Я бы удалил span, float div.inner и жестко закодировал его ширину.Примерно так:

.container {
   overflow: hidden;
}

.inner {
   float: left;
   padding: 7px;
   width: 106px; /* you could use percentages to fix the widths if you'd like to keep things dynamic. */
}

Вы можете просто настроить отступы и избегать одновременной установки границы.Установка переполнения на скрытый на контейнере заставит элемент контейнера соответствовать всем плавающим элементам внутри него.Это позволяет избежать вставки div для очистки всплывающих элементов.

Вы также можете выразить это как вложенный список, так как лучше избегать ненужных div:

<ol id="examples_list">
  <li>
    <ul class="container">
      <li class="box">...</li>
      <li class="box">...</li>
      <li class="inner">...</li>
    </ul>
  </li>
</ol>

с помощью ...

#examples_list, #examples_list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

Чтобы оформить его подобным образом.

Answer 2

Хорошо, основываясь на ответе @b_benjamin на комментарий выше, я думаю, что у меня может быть одно возможное решение, но я также думаю, что оно будет опираться на некоторый CSS, который может не очень хорошо работать в старых браузерах, но это простая концепция, которая может, вероятно, быть приспособленным с другими уловками.

Кажется, это работает в последних версиях FF, Chrome и IE9.

Сначала HTML:

<div style="width:340px;">
    <!-- a list of text, with some time's marked up -->
    <ul class="sched">
        <li><b>17:55</b><b>18:10</b> <a href="#">Lorem ipsum dolor</a> sit posuere.</li>
        <li><b>18:20</b><b>18:30</b> <a href="#">Lorem ipsum dolor</a> sit amet orci aliquam.</li>
        <li><b>18:20</b><b>18:30</b> <a href="#">Class aptent</a> taciti sociosqu ad sed ad.</li>
        <li><b>19:05</b><b>19:17</b> <a href="#">Mauris et urna et</a> ante suscipit ultrices sed.</li>
        <li><b>19:05</b><b>19:17</b> <a href="#">Proin vulputate pharetra tempus.</a> Quisque euismod tortor eget sapien blandit ac vehicula metus metus.</li>
    </ul>
</div>

Теперь немного CSS: (я использовал простую цветовую тему, основанную на образце фотографии b_benjamin)

/* reset default list styles */
.sched, .sched li{
    list-style:none; 
    font-size:14px; 
    padding:0;
    margin:0; 
}
.sched li{
    position:relative; 
    padding:0 10px;

    margin:10px 0; 
    background:#631015; 
    color:#FFF; 
}
.sched b{
    position:relative; 
    left:-10px; 
    display:inline-block;

    padding:2px 10px; 
    font-weight:none; 
    background:#FFF; 
    color:#666; 

}
/* some light styling for effect */
body{ 
    background:#cc222c; 
} 
.sched li a{ 
    color:#FF9; 
}

Пояснение:

Блочная модель требует определенного процесса мысли о том, как добиться заполнения для встроенных элементов (текст). Одна вещь, которую вы можете сделать, это просто поместить отступ вокруг всего контейнера.

В своей концепции я использовал список UL, и каждый элемент LI является контейнером. Я использовал 10px отступ на контейнере.

.sched li{
    padding:0 10px;
}

Это даст нам наше заполнение, но оно заставит наши элементы времени также иметь это заполнение. Мой «трюк» состоит в том, чтобы «исправить» это, используя отрицательное относительное положение, равное отступу:

.sched b{
    display:inline-block; /* make these items act like block level elements */
    position:relative; /* give the b elements a relative position*/
    left:-10px; /* offset them equal to the padding */
}

Еще одна вещь, которую нужно сделать, это убедиться, что родительский элемент также является position: относительным, поэтому дочерний элемент будет использовать содержащиеся в нем измерения:

.sched li{
    position:relative; /* needed for B elements to be offset properly */
    padding:0 10px;
}

Вот пример того, как это выглядит в Chrome.

Конечно, вы можете поиграть с отступами. Возможно, есть также некоторые решения, чтобы заставить элементы "B" плавать, но это, похоже, хорошо работает.

Надеюсь, это поможет!

Answer 3

Бен, я не понимаю, почему ты использовал бы два пролета, обернутых вокруг одного и того же элемента.Кроме того, я редко использую пролеты из-за их непостоянства.Из того, что я понимаю, вы хотите, чтобы 3 блока сидели рядом с последним элементом, который будет немного дополнен.

Я бы предложил просто добавить дополнительный класс в дополненный div (или идентификатор).

Попробуйте это ...

[HTML]

<h2>double span with floated elements next to it</h2>
 <div class="box">box #1</div>
 <div class="box">box #2</div>
 <div class="box boxPadded">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet.
 </div>
 <div class="cleaner"></div>

[CSS]

.cleaner{clear: left; line-height: 0; height: 0;} 
.box{margin-right: 5px; width: 100px; min-height: 25px; float: left;}
.boxPadded{padding: 3px 3px 9px 3px; word-wrap: break-word;}

Итак, теперь третий элемент имеет атрибуты класса "box", а также свой собственный отдельный атрибут "boxPadded".

«Мин-высота» в основном для третьего элемента.Вы можете поместить его в класс boxPadded, но я немного ленив.Это позволит элементу долго растягиваться, если текст больше, чем элемент.

«Очиститель» - это то, что я использую после того, как плаваю элементы.Его «обычно не требуется, если у вас нет элементов в плавающем элементе.

« Обтекание по слову »позволит незаполненной строке длиннее, чем элемент, обернуть вокруг блока.