Question

这是一个重新发布，因为我猥亵了第一篇文章。我为此道歉。所以我有两个内嵌块显示的DIV，我希望它们彼此相邻，但我也希望块内的文本表现正常。正如你在演示中看到的那样，block2中的文本发生在块1中的文本之外。我不会像在小提琴中那样粘贴CSS。

#container {
  border: 1px solid green;
  width: 35%;
  white-space: nowrap
}
#box1,
#box2 {
  border: 2px blue solid;
  display: inline-block;
  white-space: normal
}
#box2 {
  white-space: normal
}

<DIV id="container">
  <DIV id="box1">
    Box1
  </DIV>
  <DIV id="box2">
    Box2 More Box2 and More
  </DIV>
</DIV>

JSFiddle Code

由于

Answer 1

您需要在两个子元素上设置宽度以约束其中的文本，请参阅下面的示例：

#container {width:35%;white-space:nowrap; background: teal;}
#box1, #box2 {width: 30%; display:inline-block;white-space:normal; background: aqua;}
#box2 {width: 70%; white-space:normal; background: aqua;}

<div id="container">
    <div id="box1">Box1</div>
    <div id="box2">Box2 More Box2 and More</div>
</div>

Answer 2

您可以在容器上使用display:flex。

这是jsfiddle示例https://jsfiddle.net/c6y2dn4d/1/

#container {
  border: 1px solid green;
  width: 35%;
  white-space: nowrap;
  display: flex
}
#box1,
#box2 {
  border: 2px blue solid;
  display: inline-block;
  white-space: normal
}
#box2 {
  white-space: normal;
  margin-left: 5px
}

<DIV id="container">
  <DIV id="box1">
    Box1
  </DIV>
  <DIV id="box2">
    Box2 More Box2 and More
  </DIV>
</DIV>

Answer 3

这就是你要找的东西吗？ https://jsfiddle.net/gwzn3ek3/

<DIV id="container">
    <DIV id="box1">
        Box1
    </DIV><DIV id="box2">
        Box2 More Box2 and More
    </DIV>
</DIV>

基本上，两个内联块标记之间不能有空格，因为它们之间会产生很小的间距。

Answer 4

使用javascript去你的小提琴并将这个javascript部分添加到它

var box1 = document.getElementById("box1").offsetWidth;
var box2 = document.getElementById("box2").offsetWidth;
var newWidth = box2 + box1 +"px";
document.getElementById("container").style.width=newWidth;

这应该有效。希望我能帮助你

Answer 5

这对我来说似乎是<table> ......

尝试这样的事情：

＆＃13;

#container {
  border: 1px solid green;
  width: 35%;
  white-space: nowrap;
  display: table;
}
#box1,
#box2 {
  border: 2px blue solid;
  display: table-cell;
  white-space: normal;
}

＆＃13;

<DIV id="container">
  <DIV id="box1">
    Box1
  </DIV>
  <DIV id="box2">
    Box2 More Box2 and More
  </DIV>
</DIV>

＆＃13;

我遇到了内联块和空白以及CSS的问题

5 个答案: