2 столбца div с одинаковой высотой авто

0

Я делаю макет для интернет-магазина. Я хочу иметь двухстолбцовый макет с двумя div на одной высоте, но не для всех div, а только для двух в той же строке. проблема в том, что у изображений не все одинаковые высоты, поэтому иногда левый div выше, что делает следующий div на правой стороне (float: left). Есть ли способ разрешить его без одинаковой высоты для всех div?

HTML:

<div id="inhalt">
  <div class="listext">Title<br /><br />
    <div><span class="listebild">picture</span>text</div>
    <div class="listepreis">price</div>
    <div class="listemenge">formular stuff</div>
  </div>

  <div class="listext">Title<br /><br />
    <div><span class="listebild">picture</span>text</div>
    <div class="listepreis">price</div>
    <div class="listemenge">formular stuff</div>
  </div>

  <div class="listext">Title<br /><br />
    <div><span class="listebild">picture</span>text</div>
    <div class="listepreis">price</div>
    <div class="listemenge">formular stuff</div>
  </div>

CSS:
#inhalt
  {
 width: 600px;
 float: right;
 margin-top: 1px;
 margin-left: 1px;
 margin-bottom:20px;
 padding: 10px 10px 20px;
 background-image: url(http://www.kostuemkaiser.ch/images/bg_3.png);
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
 }  '
.listebild {
    width: 68px;
    float: left;
    text-align:left;
    margin-bottom:25px;
 }


 .listext {width: 300px;
    float: left;
    text-align:left;
    margin-bottom:25px;
    min-height:170px;
 }

 .listepreis {
    float: left;
    text-align:left;
    padding-top: 20px;
    margin-right:15px;
    font-size:12px;
 }

 .listemenge {
    float: left;
    font-size:12px;
    text-align:left;
    padding-top: 17px;
 }

Есть ли способ уменьшить высоту, если изображения обоих div в одной строке невелики? Мне нужен этот стиль "одного div", потому что данные будут заполняться автоматически. Вот как это выглядит с min-height 170px: проблема, если я заберу его, иногда левый div сжимается в правой части... Thanx для идей

  • 0
    Мне потребовалось некоторое время, чтобы получить то, что вы хотели: если вы хотите, чтобы фрагменты были выровнены - вам, вероятно, следует либо установить его высоту, либо ограничить размеры элементов внутри него (чтобы в конечном итоге ширина / высота были одинаковыми). ). если вы хотите макет из двух столбцов - просто используйте ответ, который я предоставил. удачи
  • 0
    Thyx и извините за плохое объяснение ... Вот так я и делаю это сейчас, я просто надеялся, что смогу оставить размер контента неограниченным ...
Теги:

2 ответа

1
Лучший ответ

Используйте inline-block вместо плавания, и ваша проблема должна исчезнуть. Измените класс .listext следующим образом:

.listext {
    width: 298px;
    display: inline-block;
    text-align:left;
    margin-bottom:25px;
 }

Обратите внимание, что для работы inline-block нам потребовалось несколько пикселей от ширины. Я также удалил минимальную высоту, поскольку она больше не нужна.

Для получения дополнительной информации о inline-block я бы предложил прочитать эту статью.

Поделиться
  • 0
    Спасибо, это очень близко к тому, что мне нужно. Но все же коробки имеют странные поля между собой: cedricgschwind.com/kkss/screen.jpg
  • 0
    Попробуйте добавить vertical-align: top; к классу .listext и посмотрите, поможет ли это.
Показать ещё 2 комментария
0

Я понимаю, что вы хотите, чтобы левый и правый бит были выровнены, но я не мог получить это из вашего вопроса и макета, поэтому вместо этого я сделал вам POC, который показывает вам, как использовать

display: table;

а также

display: table-cell;

может решить вашу проблему: http://jsfiddle.net/B2k2a/1/

Поделиться
  • 0
    Спасибо! но что, если у меня более одной строки? jsfiddle.net/B2k2a/3

Ещё вопросы

Сообщество Overcoder
Наверх
Меню