0

请看这个小提琴。

对于以下两个课程，我有不同的行为。

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

.class3 {
    width: 50%;    /* Wraps to next line */
    display: inline-block;
}
  • 我想要做的是将宽度平均划分为 b/w 两个 div，然后开始用自己的内容填充每个 div *。
  • 但是宽度为 50%，如果我在 div 中放一些文本，第二个 div 会换行到下一行
  • 宽度为 49.x%，它不会换行。

为什么要包装？我正在一个特定的 div 中工作。

我怎样才能让它不换行并保持宽度 = 50%。

除了 50%，我不知道如何得出正确的值。

4

7 回答 7

1

尝试像这样浮动您的 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-29T06:06:03.140 回答
1

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

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

请参阅两个内联块，宽度为 50% 的元素换行到第二行以获得更好的解决方案。

于 2013-02-06T08:54:24.717 回答
0

使用在左边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>

我的小提琴

于 2012-07-29T06:04:43.980 回答
0

它们堆叠而不是彼此相邻的原因是 display: inline-block 识别空白。如果您在第一个 div 之后有返回，那么它将拾取它并使其堆叠。解决方法将类似于...

<div class="col1">

Column one content.

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

Column two content.

</div>
于 2013-04-16T15:31:22.343 回答
0

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

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

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

于 2013-12-23T18:06:22.497 回答
0

我经常使用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%;
}

我的小提琴

于 2013-12-23T18:29:45.813 回答
-1

放一个：

margin:-2px;

进入你的班级3。这不会破坏您的 div 而是解决您的问题。不知道为什么

于 2012-07-29T06:07:45.633 回答