HTML/CSS-如何制作 4 列文本答案

【问题标题】：HTML/CSS- how to make 4 colums of textHTML/CSS-如何制作 4 列文本
【发布时间】：2016-07-28 21:09:54
【问题描述】：

我一直在尝试在每张图片下方制作 4 列图片和文字，并将所有 4 列放在 1 行中。这是我到目前为止所得到的：

* {
  width: 80%;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  max-width: 900px;
}
body li {
  text-decoration: none;
  display: inline-block;
}
.main-body li {
  text-decoration: none;
}
.main-body {
  padding-top: 80px;
  padding-bottom: 70px;
  border-bottom: 2px solid #dfe2e6;
}
.livingroom-laundy,
.kithen-bathroom {
  width: 46.5%;
}
.kithen-bathroom {
  float: left;
}
.livingroom-laundy {
  float: right;
}
.main-body,
img,
p {
  width: 200px;
  height: 200px;
}

<html>

<head>
  <title>Cabinets INC.</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script src="apps.js"></script>
</head>

<body>
  <div class="header">
    <h1>House.</h1>
    <ul>
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
      <li><a href="portfolio.html">Portfolio</a>
      </li>
      <li><a href="contact.html">Contact</a>
      </li>
      <li><a href="order.html">Order</a>
      </li>
    </ul>
  </div>
  <div class="main-body">
    <ul>
      <div class="kithen-bathroom">
        <li class="kitchen">
          <img src="img/kitchen1.jpg">
          <p>Looking quality American made craftsmanship? We use only the best materials and cabinet components in our RTA cabinets. Purebond plywood cabinet cases (3/4" thick, formaldehyde-free, made in Oregon), Blum Blumotion drawer slides (full extension,
            soft closing, made in USA), Blum Blumotion hinges (soft closing, made in USA), and premium dovetailed drawer boxes come as a standard with every RTA cabinet we sell!
          </p>
        </li>
        <li class="bathroom">
          <img src="img/bathroom1.jpg">
          <p>Our cabinets utilize a frameless and full overlay RTA cabinet construction method. This results in a seamless and high end design that is impossible to rival using outdated construction methods. Combine a frameless and full overlay construction
            method with factory direct premium cabinet components and you will see nothing but beauty and longevity from your new RTA cabinet project. Enjoy your new RTA cabinet project from start to finish, order from Barker Cabinets today!
          </p>
        </li>
      </div>
      <div class="livingroom-laundy">
        <li class="livingroom">
          <img src="img/livingroom1.jpg">
          <p>Ordering RTA cabinets is easier than ever. We offer a state of the art website for placing and tracking all orders. Compile your RTA cabinets order at your own speed, check prices and play around with various options before you place your new
            RTA cabinet order. Ordering RTA cabinets on the internet has never been easier than this!
          </p>
        </li>
        <li class="laundry">
          <img src="img/laundry1.jpg">
          <p>It's easy to get started designing your project with our RTA cabinet line. Check out our online cabinet layout tutorials to see how easy it is to begin designing you project using our high end RTA cabinets. Layout and assembly is extremely simple
            and can be performed by virtually anyone!
          </p>
        </li>
      </div>
    </ul>
  </div>
  <div class="footer">
  </div>
</body>

</html>

所以我希望洗衣房、厨房、起居室和浴室各占一列。

【问题讨论】：

你的代码一团糟！它到处都是。尝试问一个特定的问题！我可以建议你使用引导程序使用引导程序表或引导程序网格！这应该对你有帮助！

标签： html css row multiple-columns

【解决方案1】：

因为这是一个非常基本的问题，而且你的代码有点乱，我只想输入一个回复。

制作一个宽度为 100% 的容器。在该容器内有 4 个宽度为 25% 的较小容器。一个 div 中的一个内容。让它们都向左浮动。将 clearfix 应用于父级。

这是一篇有用的文章，可帮助您决定如何解决问题。如果你不关心学习漂亮整洁的 html 并且想要快速修复，你可以找出引导列。http://www.w3schools.com/css/css_float.asp

.container{
width:100%;
margin:0 auto;
}

.box{
 width:25%;
 float:left;
 }

【讨论】：