将div放在一行中的麻烦[重复]答案

【问题标题】：Trouble with placing the divs in one row [duplicate]将div放在一行中的麻烦[重复]
【发布时间】：2020-07-26 01:28:10
【问题描述】：

我想将这 3 个 div 彼此对齐，但不是根据窗口设置 px 或 % 我希望它是自动的（这可能吗？）。此外，如果浏览器更窄，第三个 div 应该低于并占据整行，但不知何故它不会这样做。然而，媒体条件正在设定中。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Arial", "Helvetica", sans-serif;
}

h1 {
  text-align: center;
  padding: 15px;
}

h3 {
  border: 1px solid black;
  margin: 1px;
  font-weight: bold;
  float: right;
}

p {
  box-sizing: border-box;
  margin-top: 35px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  white-space: normal;
  overflow: overlay;
}

title {
  float: left;
  position: absolute;
  clear: both;
}

container {
  width: 100%;
  margin: 10px;
}

.section {
  float: left;
  margin: 5px;
  border: 1px solid black;
  overflow: overlay;
}

.section:nth-child(1) {
  background-color: aquamarine;
}

.section:nth-child(2) {
  background-color: cadetblue;
}

.section:nth-child(3) {
  background-color: forestgreen;
}


/* Large devices */

@media (min-width: 992px) {
  .col-lg-4 {
    float: left;
    width: 33%;
  }
}


/* Medium devices */

@media (min-width: 768px) and (max-width: 991px) {
  .col-md-6 {
    float: left;
    width: 50%;
  }
  .col-md-12 {
    clear: both;
  }
}


/* Small devices */

@media max-width: 767px {
  .col-sm-12 {
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/styles.css">
  <title>Module 2 Assignment</title>
</head>

<body>
  <header>
    <h1>Our Menu</h1>
  </header>
  <div class="container">
    <div class="section col-lg-4 col-md-6 col-sm-12">
      <h3 id="item1" class="title">Menu Item 1</h3>
      <p>Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text
        Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here </p>
    </div>
    <div class="section col-lg-4 col-md-6 col-sm-12">
      <h3 id="item2" class="title">Menu Item 2</h3>
      <p>Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text
        Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here </p>
    </div>
    <div class="section col-lg-4 col-md-12 col-sm-12">
      <h3 id="item3" class="title">Menu Item 3</h3>
      <p>Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text
        Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here </p>
    </div>
  </div>
</body>

</html>

【问题讨论】：

你能用Flexbox吗？这将大大简化流程。

标签： html css

【解决方案1】：

问题在于您的section css。

它准备使用 full with 并且它有 5px 边距，如果你将它设置为 padding 你会看到它占据了你期望的宽度。

这就像拥有 100% 的宽度并为其添加边距，边距增加了宽度并且它不适合该空间。否则，填充是元素内部宽度的一部分，不存在此问题。

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Arial", "Helvetica", sans-serif;
}
h1 {
    text-align: center;
    padding: 15px;
}
h3 {
    border: 1px solid black;
    margin: 1px;
    font-weight: bold;
    float: right;
}
p {
    box-sizing: border-box;
    margin-top: 35px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    white-space: normal;
    overflow:overlay;
}
title {
    float: left;
    position: absolute;
    clear: both;
}
container {
    width: 100%;
    margin: 10px;
}

.section {
    float: left;
    padding: 5px;
    border: 1px solid black;
    overflow:overlay;
}

.section:nth-child(1) {
  background-color: aquamarine;
   
}

.section:nth-child(2)  {
    background-color: cadetblue;
   
}

.section:nth-child(3) {
   background-color: forestgreen;
}

/* Large devices */
@media (min-width: 992px) {
  .col-lg-4 {
    float: left;
    width: 33%;
  }
}

/* Medium devices */
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-6 {
    float: left;
    width: 50%;
  }
  .col-md-12 {
    clear: both;
  }
}

/* Small devices */
@media max-width: 767px {
  .col-sm-12 {
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
    <title>Module 2 Assignment</title>
</head>
<body>
    <header> <h1>Our Menu</h1></header>
    <div class="container">
    <div class="section col-lg-4 col-md-6 col-sm-12">
        <h3 id="item1" class="title">Menu Item 1</h3>
        <p>Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here </p>
    </div>
    <div class="section col-lg-4 col-md-6 col-sm-12">
        <h3 id="item2" class="title">Menu Item 2</h3>
        <p>Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here </p>
    </div>
    <div class="section col-lg-4 col-md-12 col-sm-12">
        <h3 id="item3" class="title">Menu Item 3</h3>
        <p>Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here </p>
    </div>
    </div>
</body>
</html>

如果您想在外部添加一个白色边距，那么您可以在部分内部添加另一个额外的 div，其中包含您想要的边框、边距和颜色。

【讨论】：

【解决方案2】：

把你的 CSS 改成这个

.col-lg-4 {
    float: left;
    width: 32.80%;
}

如果你愿意，你可以像这样使用 flexbox

.container{
display:flex;
}

【讨论】：