在HTML / CSS中创建三列

Question

我对这个愚蠢的问题感到非常抱歉，但是在页面中央并排创建了三列，我已经坚持了4个多小时。我已经尝试过margin auto，使用绝对位置，但我不能让它们居中。

它确实让我想拔出我的头发，我尝试用50种不同的方式对它进行格式化。

#IARA {
  width: px margin:0 auto;
}

body {
  margin: 0 padding:0px;
}

#IARAlogo {
  margin-top: 10px;
  margin-right: 10px;
  pointer-events: none;
  float: right;
}

#checkout {
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  pointer-events: none;
}

.CLEARTOPBAR {
  clear: both;
  display: block;
  margin: auto;
}

#leftpanel {
  background-color: orange;
  width: 20%;
  height: 50%;
  padding: 25px;
}

#Middlepanel {
  background-color: blue;
  width: 35%;
  height: 50%;
  padding: 25px;
}

#Rightpanel {
  background-color: pink;
  width: 20%;
  height: 50%;
  padding: 25px;
}

<div id="IARA">
  <img id="IARAlogo" src="iaraplaceholder.png" style="width:50px;height:40px;" draggable="false" unselectable: "on">

  <img id="checkout" src="IARAcheckout.jpg" style="width:70px;height:60px;" draggable="false" unselectable: "on">

</div>

<div class="CLEARTOPBAR">


  <div id="Leftpanel">

  </div>

  <div id="Middlepanel">

  </div>


  <div id="Rightpanel">

  </div>


</div>

Answer 1

只需将display:flex添加到3个div的容器中：

#IARA {
  width: 400px;
  margin:0 auto;
}

body {
  margin: 0 padding:0px;
}

#IARAlogo {
  margin-top: 10px;
  margin-right: 10px;
  pointer-events: none;
  float: right;
}

#checkout {
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  pointer-events: none;
}

.CLEARTOPBAR {
  clear: both;
  display: flex;
  margin: auto;
}

#Leftpanel {
  background-color: orange;
  width: 20%;
  height: 50%;
  padding: 25px;
}

#Middlepanel {
  background-color: blue;
  width: 35%;
  height: 50%;
  padding: 25px;
}

#Rightpanel {
  background-color: pink;
  width: 20%;
  height: 50%;
  padding: 25px;
}

<div id="IARA">
  <img id="IARAlogo" src="iaraplaceholder.png" style="width:50px;height:40px;" draggable="false" unselectable: "on">

  <img id="checkout" src="IARAcheckout.jpg" style="width:70px;height:60px;" draggable="false" unselectable: "on">

</div>

<div class="CLEARTOPBAR">


  <div id="Leftpanel">

  </div>

  <div id="Middlepanel">

  </div>


  <div id="Rightpanel">

  </div>


</div>

或者使用float：

#IARA {
  width: 400px;
  margin:0 auto;
}

body {
  margin: 0 padding:0px;
}

#IARAlogo {
  margin-top: 10px;
  margin-right: 10px;
  pointer-events: none;
  float: right;
}

#checkout {
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  pointer-events: none;
}

.CLEARTOPBAR {
  clear: both;
  margin: auto;
}

#Leftpanel {
  background-color: orange;
  width: 20%;
  height: 50%;
  padding: 25px;
  float:left;
}

#Middlepanel {
  background-color: blue;
  width: 35%;
  height: 50%;
  padding: 25px;
  float:left;
}

#Rightpanel {
  background-color: pink;
  width: 20%;
  height: 50%;
  padding: 25px;
  float:left;
}

<div id="IARA">
  <img id="IARAlogo" src="iaraplaceholder.png" style="width:50px;height:40px;" draggable="false" unselectable: "on">

  <img id="checkout" src="IARAcheckout.jpg" style="width:70px;height:60px;" draggable="false" unselectable: "on">

</div>

<div class="CLEARTOPBAR">


  <div id="Leftpanel">

  </div>

  <div id="Middlepanel">

  </div>


  <div id="Rightpanel">

  </div>


</div>

或者让它们成为内联块：

#IARA {
  width: 400px;
  margin:0 auto;
}

body {
  margin: 0 padding:0px;
}

#IARAlogo {
  margin-top: 10px;
  margin-right: 10px;
  pointer-events: none;
  float: right;
}

#checkout {
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  pointer-events: none;
}

.CLEARTOPBAR {
  clear: both;
  font-size:0;
  margin: auto;
}

#Leftpanel {
  background-color: orange;
  width: 20%;
  height: 50%;
  padding: 25px;
  display: inline-block;
  font-size:initial;
}

#Middlepanel {
  background-color: blue;
  width: 35%;
  height: 50%;
  padding: 25px;
  display: inline-block;
  font-size:initial;
}

#Rightpanel {
  background-color: pink;
  width: 20%;
  height: 50%;
  padding: 25px;
  display: inline-block;
  font-size:initial;
}

<div id="IARA">
  <img id="IARAlogo" src="iaraplaceholder.png" style="width:50px;height:40px;" draggable="false" unselectable: "on">

  <img id="checkout" src="IARAcheckout.jpg" style="width:70px;height:60px;" draggable="false" unselectable: "on">

</div>

<div class="CLEARTOPBAR">


  <div id="Leftpanel">

  </div>

  <div id="Middlepanel">

  </div>


  <div id="Rightpanel">

  </div>


</div>

Answer 2

你可以通过使用bootstrap而不是编写太多的CSS来做，这里是bootstrap https://getbootstrap.com/的链接

这是使用bootstrap的3列代码

 <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

<div class="row">
  <div class="col-sm-4" style="background-color:orange;">Hello</div>
  <div class="col-sm-4" style="background-color:white;">Hello</div>
  <div class="col-sm-4" style="background-color:green;">Hello</div>
</div>

</div>

</body>

这里链接如何使用bootstrap https://getbootstrap.com/docs/4.0/layout/grid/中的列

希望这会帮助你。

Answer 3

这是我经常使用的片段。这些片段旨在用作STYLE中的DIV类声明。只需将文本放在div中即可。即<div class="3col">Text to be 3 columns</div>。我喜欢这个，因为它允许我在页面中有多个列样式。

<style>
.2col {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2;    /* Firefox */
column-count: 2;

-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px;    /* Firefox */
column-gap: 30px;

-webkit-column-rule: 2px outset #aaa; /* Chrome, Safari, Opera */
-moz-column-rule: 2px outset #aaa;    /* Firefox */
column-rule: 2px outset #aaa;
}

.3col {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3;    /* Firefox */
column-count: 3;

-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px;    /* Firefox */
column-gap: 30px;

-webkit-column-rule: 2px outset #aaa; /* Chrome, Safari, Opera */
-moz-column-rule: 2px outset #aaa;    /* Firefox */
column-rule: 2px outset #aaa;
}
</style>