Как я могу исправить этот трехколоночный макет?

У меня есть расположение из трех столбцов.Как я могу исправить этот трехколоночный макет?

Все столбцы определены как div. И все они осуществляют тот же CSS:

.div-column { 
    display:inline-block; 
    vertical-align: top; 
}

До тех пор, пока содержание колонок не слишком широко, они остаются рядом друг с другом, как и ожидались. Последний столбец, однако, содержит div с некоторым текстом. Если этот текст слишком длинный, весь столбец выходит из строя.

<div id=column3 class=div-column> 
    <div> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  
    </div> 
</div>

Я ожидал, что текст обернется, если он не подходит в одной строке. Что я могу сделать, чтобы длина текста не имела значения? Другими словами: Как я могу убедиться, что раскладка 3-столбца не сломается?

Важно: Я НЕ ДОЛЖЕН работать с фиксированной шириной (ширина, мин-ширина, максимальная ширина) для столбцов !!!

Большое спасибо за (надеюсь простые) идеи!

источник

2013-06-04 Ingmar

как о максимальной ширине? что до сих пор позволяет div быть меньше, но когда он достигает указанного с ним, он не увеличивается. макс-ширина: 250px; –

@Marco: Я просто создал простой тестовый сценарий. Ваше исправление отлично работает! Но: я не должен работать с фиксированной шириной (или максимальной шириной). Я надеялся на решение, которое позволит избежать этого ... – Ingmar

Я строю jsfiddle для u, плохо сделаю ответ, содержащий мое решение. –

Если я не ошибаюсь, вы хотите, чтобы все три divs существовали в одном месте и не прокручивались вниз. Для этого вы должны добавить display:table-cell; в класс div-column. Адрес Working Solution.

HTML-:

<div id=column3 class=div-column> 
    <div> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  
    </div> 
</div> 

<div class=div-column> 
    <div> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  
    </div> 
</div> 

<div class=div-column> 
    <div> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  
    </div> 
</div>

CSS-:

.div-column { 
    display:table-cell; 
    vertical-align: top; 

}

Надеется, что это помогает.

источник

2013-06-04 09:07:47 Nitesh

Ваше второе решение идеально подходит для моего сценария. Спасибо. Ты действительно сделал свой день. – Ingmar

Добро пожаловать. Обновлен ответ - @IngmarBode – Nitesh

Как насчет max-width? что до сих пор позволяет div быть меньше, но когда он достигает указанного с ним, он не увеличивается.

max-width:250px;

The JsFiddle

источник

2013-06-04 09:13:46

Как я могу исправить этот трехколоночный макет?

ответ

Смежные вопросы