Перерыв букв второго дочернего div

Question

У меня есть одно требование, где мне нужно применить ширину к родительскому элементу, который равен ширине первого дочернего элемента. Это можно легко достичь, используя display: inline-block или float: left родительскому элементу, если он имеет только один дочерний элемент. Но у меня есть более двух дочерних элементов в div. Что-то вроде этого:

Fiddle

<div class="main"> 
    <div class="first">first</div> 
    <div class="value">valuevalue</div> 
</div> 

Прямо сейчас, если я применяю display: inline-block к родительскому элементу, то имеющий ширину второго дочернего элемента.

Чтобы не случилось этого, я попытался break-word, word-break CSS свойства на второй дочерний элемент, но до сих пор не используется.

То, что я пытаюсь получить показано на следующем скриншоте:

Некоторые важные моменты:

• ширина родительского элемента должен быть равен первому элементу ребенка.
• Высота родительского элемента должна быть равна сумме всех дочерних элементов.
• Я не знаю ширины первого дочернего элемента.
• (EDIT) Первый дочерний элемент имеет фиксированную ширину и высоту. Я не знаю этих ценностей.

Я хочу сделать это, используя только css. css3 приветствуется. (Я знаю, как это сделать, используя javascript)

Answer 1

Вы можете легко получить это благодаря новым внутренним и внешним значениям CSS3 (min-content в этом случае), хотя он не поддерживается IE, поэтому он не является жизнеспособным вариантом, но я просто опубликую его, поскольку это интересно, мы сможем сделать это в будущем:

http://jsfiddle.net/S87nE/

HTML:

<div class="main"> 
    <div class="first">first</div> 
    <div class="value">valuevaluevalue</div> 
</div> 

CSS:

.main { 
    background-color: cornflowerblue; 
    width: -moz-min-content; 
    width: -webkit-min-content; 
    width: min-content; 
} 
.first { 
    width: 50px; /* I don't know this width */ 
    height: 50px; /* I don't know this height */ 
    background-color: grey; 
} 

.value{ 
    word-break: break-all; 
} 

---

Я думаю, что в худшем случае вы можете использовать его для новых браузеров и JS для IE и более старых версий.

Ссылка:

• http://dev.w3.org/csswg/css-sizing/#width-height-keywords
• http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent

Answer 2

Посмотрите на мой последний комментарий к ссылке Fiddle. Я тоже кое-что изменил в html. Установил значение div внутри первого div, чтобы использовать его ширину, и добавил слово-wrap в значение div.

.main { 
    display: inline-block; 
    background-color: cornflowerblue; 
    position: relative; 
} 
.first { 
    width: 50px; /* I don't know this width */ 
    position: relative; 
    background-color: grey; 
} 

.first p { 
    margin-bottom: 30px; 
    margin-top: 0; 
} 

.value { 
    max-width: 100%; 
    word-wrap:break-word; 
    background-color: cornflowerblue; 
} 

HTML:

<div class="main"> 
    <div class="first"> 
     <p>first</p> 
     <div class="value">valuevalue</div> 
    </div> 
</div> 

http://jsfiddle.net/jxw4q/12/

Answer 3

Важно этот ответ не может быть полезным для вас, но может помочь другим пользователям, которые имеют подобную проблему.

вы можете иметь тот же вид, что и вы, но без натяжения родительской высоты. используя position:absolute; на втором div.

Примечание: если родитель действительно не растягивается, это вызывает проблемы. , например, содержимое, которое поступит непосредственно после родителя, будет показано после элемента .first. вызывая перекрытие.

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

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

Для тех, кто подпадает под потребительной случае я описал, Вот Working Fiddle

HTML: (никаких изменений здесь)

<div class="main"> 
    <div class="first">First div set the width</div> 
    <div class="value">second fiv should wrap if bigger then first</div> 
</div> 

CSS:

.main 
{ 
    display: inline-block; 
    position: relative; 
} 
.first 
{ 
    background-color: gray; 
} 
.value 
{ 
    position: absolute; 
    background-color: cornflowerblue; /* moved here */ 
} 

Answer 4

Я не думаю, что вы сможете достичь этого без небольшой поддержки javascript. Представьте себе следующую разметку и CSS:

<div class="main"> 
     <div class="first content">first</div> 
     <div class="second content">valuevalue</div> 
</div> 

, а затем следующий CSS:

.main{ 
    background-color : red; 
    display: inline-block; 
    max-width: 50px; 
} 
.first{ 
    background-color : blue; 
} 
.second{ 
    background-color : green; 
} 
.content{ 
    word-break: break-word; 
} 

Теперь все, что вам нужно сделать, это установить максимальную ширину вашего .main DIV равным вашей первый элемент и добавить класс содержимого к каждому элементу. Я полагаю, вы добавляете свои элементы динамически.

Answer 5

В идеале, стиль макета для HTML фрагмент кода, как:

<div class="main"> 
    <div class="first">first</div> 
    <div class="value">firstvaluevalue</div> 
    <div class="value">second value value</div> 
    <div class="value">third valuevalue</div> 
    <div class="value">valuevalue on the fourth line</div> 
</div> 

достижимо с помощью следующего CSS:

.main { 
    display: inline-block; 
    background-color: cornflowerblue; 
    position: relative; 
    width: 50px; 
} 
.first { 
    width: 50px; /* I don't know this width */ 
    height: 50px; /* I don't know this height */ 
    background-color: grey; 
} 
.value { 
    word-break: break-all; 
    margin: 1.00em 0; 
} 

, как показано на: http://jsfiddle.net/audetwebdesign/tPjem/

Однако, я должен был установите для ширины .main элемент .first, чтобы получить свойство word-break.

Проблема с CSS-рендерингом заключается в том, что вы хотите, чтобы ширина братьев и сестер равнялась неизвестной ширине .first, что невозможно сделать только с помощью CSS.

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

Решение JavaScript/jQuery состоит в том, чтобы получить ширину от .first и применить ее к .main и привязать ее к действию изменения размера окна.

В некоторой степени эта проблема имеет смысл, если .first содержит изображение, которое имеет внутреннюю высоту и ширину. Если бы это было так, было бы целесообразно установить ширину .main на разумное значение, а затем масштабировать изображение в .first, чтобы заполнить ширину блока .main.

Не зная больше о реальном содержании, трудно найти альтернативы.

Answer 6

Я получил решение !!

HTML

<div class="main"> 
    <div class="first">first</div> 
    <div class="value">valuevalue</div> 
</div> 

CSS

.main { 
    overflow:hidden; 
    width:1px; 
    display:table; 
    background-color: cornflowerblue; 
} 
.first { 
    width: 50px; /* I don't know this width */ 
    height: 50px; /* I don't know this height */ 
    background-color: grey; 
    display: inline-block; 
} 
.value { 
    word-break: break-all; 
} 

Working Fiddle

Related link