CSS并排保持内联块元素

时间：2017-01-09 17:48:47

标签： html css

即使我使用了div，我想并排放置display: inline-block，有一半时间不起作用。

为什么我说一半的时间？这是因为如果我的第二个div包含的文字不符合元素的宽度，则整个div会低于第一个.inline-block { display: inline-block; } .bold { font-weight: bold; } .desc-hdr { width: 150px; /* height: 100%; */ } .desc-hdr, .desc-value { vertical-align: top; }。但如果文本很短并且可以适合第二个元素的宽度，则不会发生这种情况。

为了说明，请查看此Fiddle 

<div class="desc-list">
  <div class="desc-item">
    <div class="desc-hdr inline-block bold">First Header</div>
    <div class="desc-value inline-block">Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="desc-item">
    <div class="desc-hdr inline-block bold">Second Header</div>
    <div class="desc-value inline-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis sit amet tortor id sodales. Aenean id ligula sed augue accumsan maximus sit amet viverra nunc. Vestibulum gravida volutpat dui, nec commodo enim suscipit gravida. Pellentesque
      porta odio ut tempor elementum. Mauris id ex sed tellus sagittis laoreet. Pellentesque fringilla velit nisl, quis tempus augue consequat id. Etiam aliquet finibus facilisis. Proin aliquet, arcu at condimentum elementum, nunc est pharetra est, id
      sollicitudin nisi dolor a est. Cras efficitur arcu a nibh molestie tincidunt. Ut blandit mi sapien, eget tristique erat varius et.</div>
  </div>
</div>
  <div id='player1'></div>
  <div id='player2'></div>
  <div id='player3'></div>

6 个答案:

答案 0 :(得分：2)

这就是inline-block的工作方式，您可以在第一项上使用float: left。

＆＃13;
＆＃13; 
.bold {
  font-weight: bold;
}
.desc-hdr {
  width: 150px;
   float: left;
}
.desc-hdr,
.desc-value {
  vertical-align: top;
}
.desc-item {
  clear: both;
}
＆＃13; 
<div class="desc-list">
  <div class="desc-item">
    <div class="desc-hdr inline-block bold">First Header</div>
    <div class="desc-value inline-block">Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="desc-item">
    <div class="desc-hdr inline-block bold">Second Header</div>
    <div class="desc-value inline-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis sit amet tortor id sodales. Aenean id ligula sed augue accumsan maximus sit amet viverra nunc. Vestibulum gravida volutpat dui, nec commodo enim suscipit gravida. Pellentesque
      porta odio ut tempor elementum. Mauris id ex sed tellus sagittis laoreet. Pellentesque fringilla velit nisl, quis tempus augue consequat id. Etiam aliquet finibus facilisis. Proin aliquet, arcu at condimentum elementum, nunc est pharetra est, id
      sollicitudin nisi dolor a est. Cras efficitur arcu a nibh molestie tincidunt. Ut blandit mi sapien, eget tristique erat varius et.</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

或者，如果您想将标题与文字分开，可以使用display: table-cell

＆＃13;
＆＃13; 
.inline-block {
  display: table-cell;
}
.bold {
  font-weight: bold;
}
.desc-hdr {
  width: 150px;
}
.desc-hdr,
.desc-value {
  vertical-align: top;
}
＆＃13; 
<div class="desc-list">
  <div class="desc-item">
    <div class="desc-hdr inline-block bold">First Header</div>
    <div class="desc-value inline-block">Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="desc-item">
    <div class="desc-hdr inline-block bold">Second Header</div>
    <div class="desc-value inline-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis sit amet tortor id sodales. Aenean id ligula sed augue accumsan maximus sit amet viverra nunc. Vestibulum gravida volutpat dui, nec commodo enim suscipit gravida. Pellentesque
      porta odio ut tempor elementum. Mauris id ex sed tellus sagittis laoreet. Pellentesque fringilla velit nisl, quis tempus augue consequat id. Etiam aliquet finibus facilisis. Proin aliquet, arcu at condimentum elementum, nunc est pharetra est, id
      sollicitudin nisi dolor a est. Cras efficitur arcu a nibh molestie tincidunt. Ut blandit mi sapien, eget tristique erat varius et.</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

那是因为内联块是块容器。它们必须是矩形，它们不能有这样的形状：

      ┌─────┐
      │     │
┌─────┘     │
│           │
│           │
└───────────┘

你可以做的是浮动标题。然后它们将变得不流动，并且与以下块的边框重叠（除非建立新的块格式化上下文）。好的一点是，行框会缩小，因此文本将移动而不是重叠。

.bold {
  font-weight: bold;
}
.desc-hdr {
  width: 150px;
  float: left;
  clear: left;
}
.desc-hdr,
.desc-value {
  vertical-align: top;
}
<div class="desc-list">
  <div class="desc-item">
    <div class="desc-hdr bold">First Header</div>
    <div class="desc-value">Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="desc-item">
    <div class="desc-hdr bold">Second Header</div>
    <div class="desc-value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis sit amet tortor id sodales. Aenean id ligula sed augue accumsan maximus sit amet viverra nunc. Vestibulum gravida volutpat dui, nec commodo enim suscipit gravida. Pellentesque
      porta odio ut tempor elementum. Mauris id ex sed tellus sagittis laoreet. Pellentesque fringilla velit nisl, quis tempus augue consequat id. Etiam aliquet finibus facilisis. Proin aliquet, arcu at condimentum elementum, nunc est pharetra est, id
      sollicitudin nisi dolor a est. Cras efficitur arcu a nibh molestie tincidunt. Ut blandit mi sapien, eget tristique erat varius et.</div>
  </div>
</div>

将来我们很可能会使用display: run-in而不是浮动黑客。

  

一个run-in框是一个框，它合并到一个后面的块中，   将自身插入该块的内联级别的开头   内容。这对于格式化紧凑标题，定义，   和其他类似的东西，适当的DOM结构   在下面的散文之前有一个标题，但是需要显示   是一个内联标题，与文本一起列出。

答案 2 :(得分：0)

添加display:inline-block并不能自动将这两个元素放在一起。如果两个元素都有空间，它会将它们放在彼此之外。话虽这么说，你走的是正确的道路;你也可以限制/设置元素的宽度为＆＃34;使空间＆＃34;你需要的。

在下面的代码片段中，我没有做任何事情来控制宽度，因此，它们填充所需的宽度，而不是为其他元素提供空间。

＆＃13;
＆＃13; 
.inline-block{
  display:inline-block;
}
＆＃13; 
<div class="inline-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt, nulla sit amet lacinia fermentum, neque dui dapibus dolor, gravida sagittis nisl risus at arcu. In eget nisi eget massa venenatis luctus. Donec nec finibus lectus. Mauris iaculis fermentum convallis. Donec tempus posuere efficitur. Praesent orci risus, mattis vel urna in, viverra viverra quam. Donec aliquet, lectus vel consequat aliquet, justo velit rutrum libero, mattis interdum neque augue eu mi</div>
<div class="inline-block">Quisque dapibus magna et lorem scelerisque, at pharetra turpis scelerisque. Cras tincidunt risus in dolor imperdiet efficitur dapibus ut augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Pellentesque erat odio, consequat et arcu non, congue ultricies enim. Nam laoreet molestie sem, et dignissim est pretium eget. Nulla aliquam viverra enim ac porta. Vivamus at purus mauris</div>
＆＃13;
＆＃13;
＆＃13;

但是，在这个片段中，我们添加了宽度限制（并删除了会给我们带来问题的元素之间的空白区域）：

＆＃13;
＆＃13; 
.inline-block{
  display:inline-block;
  vertical-align:top;
}
.half-width{
  width:50%;
}
＆＃13; 
<div class="inline-block half-width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt, nulla sit amet lacinia fermentum, neque dui dapibus dolor, gravida sagittis nisl risus at arcu. In eget nisi eget massa venenatis luctus. Donec nec finibus lectus. Mauris iaculis fermentum convallis. Donec tempus posuere efficitur. Praesent orci risus, mattis vel urna in, viverra viverra quam. Donec aliquet, lectus vel consequat aliquet, justo velit rutrum libero, mattis interdum neque augue eu mi</div><div class="inline-block half-width">Quisque dapibus magna et lorem scelerisque, at pharetra turpis scelerisque. Cras tincidunt risus in dolor imperdiet efficitur dapibus ut augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Pellentesque erat odio, consequat et arcu non, congue ultricies enim. Nam laoreet molestie sem, et dignissim est pretium eget. Nulla aliquam viverra enim ac porta. Vivamus at purus mauris</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

display: inline-block;会导致文本内容换行。

听起来你想要两列。

你可以漂浮两个div。您可以在之后清除浮动以返回在单列中显示您的内容。

这是CSS 

.bold { font-weight: bold; }
.desc-list { overflow: hidden; /* this is to clear the float */ }
.desc-item {
  width: 150px;
}

.col1 { float: left; }    
.col2 { float: right; }

HTML标记

<div class="desc-list">
  <div class="desc-item col1">
    <div class="desc-hdr bold">First Header</div>
    <div class="desc-value">Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="desc-item col2">
    <div class="desc-hdr bold">Second Header</div>
    <div class="desc-value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis sit amet tortor id sodales. Aenean id ligula sed augue accumsan maximus sit amet viverra nunc. Vestibulum gravida volutpat dui, nec commodo enim suscipit gravida. Pellentesque
      porta odio ut tempor elementum. Mauris id ex sed tellus sagittis laoreet. Pellentesque fringilla velit nisl, quis tempus augue consequat id. Etiam aliquet finibus facilisis. Proin aliquet, arcu at condimentum elementum, nunc est pharetra est, id
      sollicitudin nisi dolor a est. Cras efficitur arcu a nibh molestie tincidunt. Ut blandit mi sapien, eget tristique erat varius et.</div>
  </div>
</div>

答案 4 :(得分：0)

简单的解决方案，

1。您忘记将内联块类添加到＆＃34; desc-item＆＃34; div的。所以没有那些父div将永远是块。

2. 将此添加到您的CSS将确保每个div 始终为50％。 

.desc-item{
  width: 50%;
}

3。请注意，因为默认情况下HTML可以在div之间添加一个小空格，所以即使每个小50％的额外空间也会推动第二个div降低。对此的一个解决方案是将第二个div添加到与下一个相同的行上，如下所示：

<div>
</div><div>
</div>

它有点难看，但如果它出现的话，它可以很快解决这个问题。请注意，如果您需要，可以在以后搜索更多解决方案。

在这里你的更新jsfiddle，现在应该正常工作。 https://jsfiddle.net/h2wqfz18/7/

答案 5 :(得分：0)

＆＃13;
＆＃13; 
 .inline-block,.desc-list {
        display: inline-block;
    }

    .bold {
        font-weight: bold;
    }

    .desc-item {
        width: 100%;
    }

        .desc-item > div {
            display: inline-block;
            vertical-align: top;
            min-width:150px;
        }

            .desc-item > div + div {
                width: 75%;
            }
＆＃13; 
<div class="desc-list">
  <div class="desc-item">
    <div class="desc-hdr bold">First Header</div>
    <div class="desc-value">Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="desc-item">
    <div class="desc-hdr bold">Second Header</div>
    <div class="desc-value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis sit amet tortor id sodales. Aenean id ligula sed augue accumsan maximus sit amet viverra nunc. Vestibulum gravida volutpat dui, nec commodo enim suscipit gravida. Pellentesque
      porta odio ut tempor elementum. Mauris id ex sed tellus sagittis laoreet. Pellentesque fringilla velit nisl, quis tempus augue consequat id. Etiam aliquet finibus facilisis. Proin aliquet, arcu at condimentum elementum, nunc est pharetra est, id
      sollicitudin nisi dolor a est. Cras efficitur arcu a nibh molestie tincidunt. Ut blandit mi sapien, eget tristique erat varius et.</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题