第二个子div的分隔符 [英] Break letters of second child div

问题描述

我有一个要求，我需要应用宽度到父元素，等于第一个子元素的宽度。如果父元素只有一个，则可以使用 display：inline-block 或 float：left 子元素。但我有一个以上的两个子元素。类似这样的：

HTML：

 < div class =main> ; 
< div class =first>第一< / div> 
< div class =value> valuevaluevalue< / div> 
< / div> 
  

CSS：

 code> .main {
 background-color：cornflowerblue; 
 width：-moz-min-content; 
 width：-webkit-min-content; 
 width：min-content; 
} 
 .first {
 width：50px; / *我不知道这个宽度* / 
 height：50px; / *我不知道这个高度* / 
 background-color：gray; 
} 
 
 .value {
 word-break：break-all; 
} 
  

---

参考：

• http://dev.w3.org/csswg / css-sizing /＃width-height-keywords


• http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent

I have one requirement, where I need to apply width to the parent element which is equal to the first child element's width. This can be easily achieved using display: inline-block or float: left to the parent element if it has only one child element. But I have more than two child elements in a div. Something like this:

Fiddle

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

Right now, If I apply display: inline-block to the parent element, then it is having the width of the second child element.

To not happen this, I tried break-word, word-break css properties on the second child element but still no use.

What I am trying to get is illustrated in the following screenshot:

Some important points:

• width of the parent element should be equal to the first child element.
• height of the parent element should be equal to sum of all the child elements.
• I don't know the width of the first child element.
• (EDIT) The first child element has some fixed width and height. I don't know these values.

I want to do this using just css. css3 is welcome. (I know how to do this using javascript)

解决方案

You can Achieve this easily with CSS3's new intrinsic and extrinsic width values(min-content in this cas), although, it's not supported on IE, so it's not an viable option but I will just post this as it's interesting that we will be able to do that in the future:

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

---

I guess in the worst case you could use this for newer browsers and JS for IE and older versions.

Reference:

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

这篇关于第二个子div的分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！