Question

想要实现这样的目标：

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

实际上看起来像：

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

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

父div必须保持固定大小，例如为200px;
儿童div 1和2彼此相邻漂浮

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

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

Answer 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>

Answer 2

您可以使用float概念来实现此目的。为了更好地理解，您最初可以使用宽度。

父母div使用：100％; 对于儿童div使用：50％，50％（总计可以最多100％）

Here is a fiddle以下内容：

＆＃13;

body {
  background: yellow;
}
.parent {
  width: 100%;
  background: green;
  overflow: hidden;
}
.child {
  width: 50%;
  float: left;
  color: #fff;
}

＆＃13;

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

＆＃13;

Answer 3

您可以为这些子div提供float:left，例如：

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

并且您必须为parent-div提供特定的宽度：

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

Answer 4

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

jsfiddle

Answer 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供参考。

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

5 个答案:

实施例