Question

我正在尝试为我有三个对象的网页构建一个标题，但是第三个对象正在它所在的标题下面。我怎样才能得到第三个对象（id =“cart”）落在标题下面？标题和购物车div需要有固定的宽度，但是选项div需要通过浏览器进行拉伸。

我的HTML：

<header>
  <div id="title">
  </div>
  <div id="options">
  </div>
  <div id="cart">
  </div>
</header>

我的CSS：

#title {
    float: none;
    height: 150px;
    width: 300px;
    margin: 0;
}
#options {
    display: block;
    height: 150px;
    background-color: #ff5500;
}
#cart {
    height: 40px;
    width: 48px;
    display: block;
    float: right;
}

Answer 1

您可以将width: calc(100% - 348px);用于中间元素（这使其具有反复性，而其他宽度保持不变）并将float: left应用于所有三个元素：

html, body {
margin: 0;
}
header > div {
float: left;
}
#title {
    height: 150px;
    width: 300px;
    margin: 0;
    background-color: #ff5500;
}
#options {
    height: 150px;
    width: calc(100% - 348px);
    background-color: #05f;
}
#cart {
    height: 40px;
    width: 48px;
    float: right;
    background-color: #5f0;
}

<header>
  <div id="title">
  Title
  </div>
  <div id="options">
  Options
  </div>
  <div id="cart">
  Cart
  </div>
</header>

Answer 2

给出所有div的高度和宽度，并将它们的显示设置为内联块。

你想到的是this吗？

#title {
  float: none;
  height: 250px;
  width: 300px;
  margin: 0;
  background-color: red;
  display: inline-block;
}
 #options {
  display: block;
  height: 150px;
  width:300px;
  background-color: #ff5500;
  display: inline-block;
}
 #cart {
   display: block;
   width:300px;
   background-color: blue;
   height: 100px;
   display: inline-block;
  }

Answer 3

将所有三个div的宽度设置为33％，并为所有三个div元素将float属性设置为left，或者可以为每个div元素将宽度设置为33％，并使用值inline-block添加display属性，它也将使三个div互相浮动。

如何使用css在同一行显示三个具有不同高度的项目？

3 个答案: