防止其他 div 内的 2 个 div 换行

Posted 2023-02-16

【中文标题】防止其他 div 内的 2 个 div 换行

【英文标题】：Prevent line break for 2 divs inside other div

【发布时间】：2014-11-03 06:43:38

【问题描述】：

想要实现这样的目标：

|--- parent-div ------------------------|
||----- child-div-1 -------||----- child-div-2 -------|
|---------------------------------------|

实际上看起来像：

|--- parent-div ------------------------|
||----- child-div-1 -------||----- chi..|
|---------------------------------------|

假设您有一个输入字段，显示相对于网站名称的用户域，例如http://www.domain-name.com/**username**

父 div 必须保持固定大小，例如200 像素； 子 div 1 和 2 并排浮动

现在发生的是 Child Div 2 跳到下一行：

|--- parent-div ------------------------|
||----- child-div-1 -------|            |
||----- child-div-2 ----------|         |
|---------------------------------------|

【问题讨论】：

井描述。你试过什么？

谢谢！ 'white-space: nowrap' 和 'display:inline-block' 解决方案对我来说是最好的，因为域名和用户名可以有不同的宽度。

【参考方案1】：

要实现这一点：

|--- parent-div ------------------------|
||----- child-div-1 -------||----- child-div-2 -------|
|---------------------------------------|

在父级上使用white-space: nowrap，以允许其子级从它中打出来

给孩子们display: inline-block

您可以在长网址上显示省略号：text-overflow:ellipsis 和 overflow: hidden

示例

此示例滚动溢出。要隐藏它，请将 overflow-x: hidden 放在父级上。要显示它，请删除溢出属性。

.parent 
  width: 200px;
  border: solid 1px #000;
  padding: 10px;
  white-space: nowrap;
  overflow: auto;

.child 
  width: 150px;
  height: 100px;
  border: solid 1px #000;
  display: inline-block;
  vertical-align: top;
  text-overflow:ellipsis;
  overflow: hidden;

<div class="parent">
  <div class="child">
      <a>http://www.example.com/this-is-really-long/</a>
  </div>
  <div class="child">
      <a>http://www.example.com/this-is-really-long/</a>
  </div>
</div>

【讨论】：

我选择了这个解决方案，因为它在我的情况下允许最大的灵活性。

很好的解决方案，谢谢，它只使用空格就可以工作：nowrap;在父级中并显示：inline-block；在儿童中

【参考方案2】：

您可以使用浮动概念来实现这一点。为了更好地理解，您可以先使用宽度。

对于父 div 使用：100%； 对于子 div 使用： 50% , 50% （总计最大为 100%）

Here is a fiddle以下：

body 
  background: yellow;

.parent 
  width: 100%;
  background: green;
  overflow: hidden;

.child 
  width: 50%;
  float: left;
  color: #fff;

<div class="parent">
  <div class="child">
    Child 1 content comes here.
  </div>
  <div class="child">
    Child 2 content comes here.
  </div>
</div>

【讨论】：

我喜欢这个概念——它很干净。不幸的是，在我的情况下，域名和用户名都非常宽。

【参考方案3】：

你可以给那些子 div 一个float:left，例如：

child-div-1, child-div-2 
    float:left;

你必须给parent-div一个特定的宽度：

parent-div 
    width: 200px; // you can choose whatever you want

【讨论】：

如果 div1 占据 80% 的宽度怎么办？而div2需要30%

你可以给家长overflow-x:hidden;。

好吧！！可以有多种解决方案。我们不知道 op 尝试了什么？

【参考方案4】：

您可以尝试对两个内部 div 使用 CSS 属性 display: inline-block;，这应该将它们彼此对齐。

jsfiddle

【参考方案5】：

试试这个：

html：

<div class="parent-div">
  <div class="child-div">    
  </div>
  <div class="child-div">    
  </div>
</div>

CSS：

.parent-div 
  width: 200px;
  background: #F00;
  white-space: nowrap;
  overflow:hidden;

.child-div 
  width: 150px;
  height: 100px;
  background: #0F0;
  display: inline-block;

JSFiddle link 供参考。