Question

请查看 fiddle 。

我有两种不同的行为。

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

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

我想要做的是将宽度等分为两个div，然后开始用自己的内容填充每个div *。
但是宽度为50％，如果我在div中添加一些文本，则第二个div包含到下一行
宽度为49.x％，不会换行。

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

如何使其不包裹并保持宽度= 50％。

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

Answer 1

使用float: left;在左侧浮动第一个<div>，您还可以使用<div>将第二个float: right;浮动到右侧，而不是使用<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

Answer 2

尝试像这样浮动你的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;
}

Answer 3

您无需诉诸float。这是一个相对丑陋的解决方法，它引入了自己的问题（必须清除浮点数和/或在包含元素上设置overflow:hidden。）

您没有提供HTML标记，但我猜您在元素之间有空格，就像Alien先生的回答一样。

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

Answer 4

它们堆叠而不是彼此相邻的原因是显示：内联块识别空白区域。如果你在第一个div之后有一个返回，那么它会选择它并使它堆叠。解决方法类似于......

<div class="col1">

Column one content.

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

Column two content.

</div>

Answer 5

不要使用花车，它们会引起各种头痛。只需将其添加到您的CSS：

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

...然后确保您网站上的所有文字都包含在“p”或“span”

中

Answer 6

我经常使用 display：inline-block; 。

但是， display：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

Answer 7

放一个：

margin:-2px;

进入你的class3。这不会打破你的div，但解决你的问题。不知道为什么

inline-block div包含宽度= 50％且包含一些文本

7 个答案: