选项1

Question

我有3个div，其中包含文字和图片。

我想在左侧第一个div，中间第二个div和右侧第三个div的同一行显示它们。我可以为第一个div和第三个div执行CSS。第二个div给我带来了麻烦。到目前为止，我有以下代码：

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style type="text/css">
         .onLeft {
            display: inline;
            float: left;
         }
         .onRight {
            display: inline;
            float: right;
         }
      </style>
   </head>
   <body>
      <div class="onLeft"><h3>Left</h3><img src=images/left.png></div>
      <div class="onCentre"><h3>Centre</h3><img src=images/centre.png></div>
      <div class="onRight"><h3>Right</h3><img src=images/right.png></div>
   </body>
</html>

有什么建议吗？

Answer 1

我不希望有一个固定宽度，因为3 div可以有可变宽度

所以：

选项1

设置display:table/table-cell

section {
  display: table;
  width: 100%
}
article {
  border: 1px red solid;
  display: table-cell;
}

<section>
  <article>article 1</article>
  <article>article 2</article>
  <article>article 3</article>
</section>

选项2

设置display:flex

section {
  display: flex;
}
article {
  border: 1px red solid;
  flex:1
}

<section>
  <article>article 1</article>
  <article>article 2</article>
  <article>article 3</article>
</section>

Answer 2

所以你的要求就是在页面的每个部分左右，中间和右边分布三个div。您并不是在寻找列布局。您可以使用额外的div来执行此操作。检查jsfiddle链接，这是执行此操作的一种方式。

.onLeft {
  display: inline;
  float: left;
  width: 30%;
  background-color: #ccc;
}
.onCentre {
  float: left;
  width:40%;
  background-color: red;
}
.realCentre {
  margin: 0 auto;
  width: 90%;
  background-color: #efefef;
}

.onRight {
  display: inline;
  float: right;
  width: 30%;
  background-color: #ddd;
}

Answer 3

我的建议是使用内联块而不是浮动。

CSS：

div {display: inline-block}
.onLeft {width: 30%}
.onCenter {width: 40%}
.onRight {width: 30%}

向左，向中，向右浮动3个div在同一条线上

3 个答案:

选项1

选项2