Question

我在2天前问了同样的问题，但现在我仍然没有得到它。
我有1个div，我希望它分成3列div。我知道如何为2列做这个，但是，当我尝试3列（右，中，左）时，我得到了这个：

enter image description here

问题：粉红色正方形不在中心

这是我的代码：

HTML：

 <div id="our_services" class="container">
    <h1>המוצרים שלנו</h1>
    <div id="try">
        <div id="product1">
        </div>
        <div id="product2">
        </div>
        <div id="product3">
        </div>
    </div>
</div>

CSS：

#our_services {
    /*height: 450px;*/
    text-align: center;
    font-family: "open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
    color: black;
    background-color: rgb(224,224,224);
    overflow: auto;
    margin: auto;
}

#try {
    background-color: orange;
    width: 50%;
    height: 50%;
    margin: auto;
}

#product1 {
    width: 30%;
    height: 75%;
    background-color: green;
    float: right;
    margin: 5px;
}

#product2 {
    width: 30%;
    height: 75%;
    background-color: pink;
    float: right;
    margin: 5px;
}

#product3 {
    width: 30%;
    height: 75%;
    background-color: blue;
    float: left;
    margin: 5px;
}

Answer 1

#our_services {

  /*height: 450px;*/

  text-align: center;

  font-family: "open_sans_hebrewregular", "alefregular", arial, "Times New Roman";

  color: black;

  background-color: rgb(224, 224, 224);

  overflow: auto;

  margin: auto;

}

#try {

  background-color: orange;

  width: 50%;

  height: 50%;

  margin: auto;

}

#product1 {

  width: 30%;

  height: 75%;

  background-color: green;

  float: left;

  margin: 1.5%;

}

#product2 {

  width: 30%;

  height: 75%;

  background-color: pink;

  float: left;

  margin: 1.5%;

}

#product3 {

  width: 30%;

  height: 75%;

  background-color: blue;

  float: left;

  margin: 1.5%;

}

<div id="our_services" class="container">
  <h1>המוצרים שלנו</h1>
  <div id="try">
    <div id="product1">
      afs
    </div>
    <div id="product2">
      asf
    </div>
    <div id="product3">
      asf
    </div>
  </div>
</div>

你也可以在其中一个方框上漂浮

Answer 2

请尝试使用display:inline-block;。 exemple

Answer 3

使用float left to 1st and 2nd div。并给出百分比保证金。我想这会解决你的问题。

Answer 4

据我了解：如果您不希望自己之间有任何空格，则必须将width属性设置为(100/3)%

这一切都取决于你想要的布局，如果你想要它们之间的边距空间，以便它们彼此之间以及它们的容器div的边缘之间相等的间距你将不得不解决该怎么做因此，在这种情况下，您现在每个都有30%宽度，这会留下10%间距宽度，您可以将2.5%扩展到前两个div的margin-left:，然后对于第3个div，2.5%使用margin-right:（对于右侧和第3个div之间的空格）margin-left:

但正如我所说，这完全取决于你对布局的确切要求，所以如果你没有回答你的问题，你可以告诉我更多关于你的预期布局吗？

如果你想根据你目前拥有的内容进行一个非常简单的修复，你可以将margin:属性设置为auto，并且应该将中间div置于你现在拥有的内容之间。

编辑：您还应该编辑浮动属性，以便它们都可以单向浮动。

Answer 5

我不知道你能用纯HTML / css技术做到这一点。（或至少此部分）加载后，您可以使用javascript排列项目。

另一方面，虽然行之间的距离不等于第一行/最后一行与橙色矩形的开头/结尾之间的距离，但这会让你更接近你想要的东西：

 <div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
    <div class="smth">
        <div id="product1" class="product">
        </div>
    </div>
    <div class="smth">
        <div id="product2" class="product">
        </div>
    </div>
    <div class="smth">
        <div id="product3" class="product">
        </div>
    </div>
</div>

<style>
#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
overflow: auto;
margin: auto;
}

.smth {
    width: 33%;
    height: 75%;
    float: left;    
}

#try{
    background-color:orange;
    width:50%;
    height:50%;
    margin:auto;
}

.product {
    width: 90%;
    height: 100%;
    margin: auto;
}

#product1{
    background-color:green;
}

#product2{
    background-color:pink;
}

#product3{
    background-color:blue;
}

</style>
</div>

Answer 6

检查下面的示例：

<强>代码：

#our_services {          
  text-align: center;
  font-family: "open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
  color: black;
  background-color: rgb(224, 224, 224);
  overflow: auto;
  margin: auto;
}
#try {
  background-color: orange;
  width: 50%;
  height: 50%;
  margin: auto;
}
#product1 {
  width: 31%;
  height: 200px;
  background-color: green;
  float: left;
  margin: 1%;
}
#product2 {
  width: 31%;
  height: 200px;
  background-color: pink;
  float: left;
  margin: 1%;
}
#product3 {
  width: 31%;
  height: 200px;
  background-color: blue;
  float: left;
  margin: 1%;
}

<div id="our_services" class="container">
  <h1>המוצרים שלנו</h1>
  <div id="try">
    <div id="product1">
    </div>
    <div id="product2">
    </div>
    <div id="product3">
    </div>
  </div>
</div>

Example

Answer 7

添加以下css：

html, body {
  width: 100%;
  height: 100%;
}

并将以下属性添加到#our_services css：

  width: 100%;
  height: 100%;

为prouctu div进一步设置box-sizing: border-box;和margin: 0% 0% 0% 2.5%;（您需要的顶部，正确的0％，您需要的底部，并留下2.5％）。顺便说一句。您应该将常用样式提取到product类并将该类应用于产品div ...

Answer 8

一个不错的解决方案是使用display:table和display:table-cell。哪个适用于2和3 div。

<强> HTML：

<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1" class="product">
</div>
<div id="product2" class="product">
</div>
<div id="product3" class="product">
</div>

<强> CSS：

    #our_services {
    background-color: rgb(224, 224, 224);
    color: black;
    font-family: "open_sans_hebrewregular","alefregular",arial,"Times New Roman";
    height: 450px;
    margin: auto;
    overflow: auto;
    text-align: center;
}
#try {
    background-color: orange;
    display: table;
    height: 50%;
    margin: auto;
    width: 50%;
     border-collapse: separate;
  border-spacing: 10px;
}
.product{
     display: table-cell;
    height: 75%;
    margin: 5px;
    width: 30%;
}

#product1 {
    background-color: green;
}
#product2 {
    background-color: pink;  
}
#product3 {
    background-color: blue;
}

检查Fiddle here.

将div分为3列

8 个答案: