inline-block div包装宽度= 50％，其中包含一些文字

请看看这个fiddle。inline-block div包装宽度= 50％，其中包含一些文字

我对于以下两个类有不同的行为。

.class2 { 
    width: 49.5%; 
    display: inline-block; 
} 

.class3 { 
    width: 50%; /* Wraps to next line */ 
    display: inline-block; 
}

我想要做的是平分宽度b/w的两个div然后开始填写每个格*有它自己的内容。
但宽度为50％，如果我在div中放置了一些文本，第二个div将换行到下一行
宽度为49.x％，它不换行。

为什么要包装？我在一个特殊的div里工作。

我怎样才能让它不包裹并保持宽度= 50％。

除了50％，我不知道如何拿出正确的价值。

来源

2012-07-29 gaurav jain

使用float: left;浮在左边，你第一次<div>，你也可以在右侧使用float: right;浮动你的第二<div>不是使用<div style="clear: both;"></div>来清除浮动元素：

CSS：

.class1 { 
    background-color: red; 
    width: 100%; 
} 
.class2 { 
    width: 50%; 
    background-color: blue; 
    color: white; 
    float: left; 
} 

.class3 { 
background-color: green; 
    width: 50%; 
    float: right; 
}

HTML：

<div class="class1"> 
    <div class="class2"> 
     This is demo 
    </div> 
     <div class="class3"> 
      This is demo   
    </div> 
    <div style="clear: both;"> 
</div>

My fiddle

来源

2012-07-29 06:04:43

将你能够告诉为什么浮动解决这个问题？我正在尝试。 – 2012-07-29 06:14:13

我想这[**文章**]（http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/）将帮助你详细.. – 2012-07-29 06:15:58

非常感谢你很多 – 2012-07-29 06:18:52

尝试浮动你的div像这样：

.class1 { 
    background-color: red; 
    width: 100%;  
} 
.class2 { 
    width: 50%; 
    display: inline-block; 
    background-color: blue; 
    color: white; 
    float:left;  
} 
.class3 { 
    width: 50%; 
    display: inline-block; 
    background-color: blue; 
    color: white; 
    float:right; 
}

来源

2012-07-29 06:06:03 Rega

-1

放一个：

margin:-2px;

到您的CLASS3。这不会破坏你的div，但解决你的问题。不知道为什么

来源

2012-07-29 06:07:45

你不需要求助于float。这是一个相对难看的解决方法，它引入了自己的问题（必须清除浮动元素和/或在包含元素上设置overflow:hidden）。

你不提供你的HTML标记，但我猜你会在元素之间留有空白，就像在Alien先生的回答中一样。

请参阅Two inline-block, width 50% elements wrap to second line以获得更好的解决方案。

来源

2013-02-06 08:54:24 Neek

堆栈而不是坐在一起的原因是display：inline-block可以识别空白区域。如果你在第一个div之后有回报，那么它会选择并让它堆叠起来。解决方法将类似于...

<div class="col1"> 

Column one content. 

</div><div class="col2"> 

Column two content. 

</div>

来源

2013-04-16 15:31:22 Hughes

不要使用浮动，它们会导致各种头痛。就在这个添加到您的CSS：

body,html{ white-space:nowrap; } 
a,pre,p,span,strong,h1,h2,h3,h4,h5,h6{ white-space:normal; }

...然后确保您网站上的所有文字无论是包含“P”或“范围”内

来源

2013-12-23 18:06:22 james

我经常使用显示：inline-block的;。

但是，显示：行内块有一些问题。

我推荐Grids - Pure模式，并写了一个像Pure的示例代码。

.class1 { 
    letter-spacing: -0.31em; 
    *letter-spacing: normal; 
    *word-spacing: -0.43em; 
    text-rendering: optimizespeed; 
    font-family: Georgia, Times, "Times New Roman", serif; 
} 

.class2, .class3 { 
    display: inline-block; 
    zoom: 1; 
    letter-spacing: normal; 
    word-spacing: normal; 
    vertical-align: top; 
    text-rendering: auto; 
    font-family: "Hiragino Kaku Gothic ProN",Meiryo,Verdana,sans-serif; 
    width: 50%; 
}

my fiddle

来源

2013-12-23 18:29:45 GeckoTang

inline-block div包装宽度= 50％，其中包含一些文字

回答

相关问题