如何将3个div分隔成1个div

我目前正在学习HTML。我试图在一个div中添加3个图像，这些图像之间需要有相同的空间。如何做到这一点？

示例：https://docs.google.com/drawings/d/1WZdL0WVz-VndX2qP0Ig0S8fZnCGW2k37RHvWXLdgWz0/edit?usp=sharing

我目前拥有的代码：

<style type="text/css">
 .maindiv{
    position: relative;
    width:90%;
    height:50%;
    border-style:solid;
    border-color:Red;
    border-width:2px;
  }
 .imgbott{
    height:auto;
    width:auto;
    max-width:200px;
    max-height:200px;
    float:left;
    text-align: center;
  }
</style>

<body>
  <div class="maindiv">
    <div class="imgbott">
      <img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
      <a>TESTE</a>
    </div>
    <div class="imgbott">
      <img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
      <a>TESTE</a>
    </div>
    <div class="imgbott">
      <img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
      <a>TESTE</a>
    </div>
  </div>
</body>

代码运行：https://script.google.com/a/macros/itcld.com.br/s/AKfycbyjeAIFhKnAXzvXd8lS3S-ND4H0n63i-FBxr-i9Z1omeFmBYtA/exec

谢谢。

将css更改为：

.imgbott{
    margin: 0px 10px;
    height:auto;
    width:auto;
    max-width:200px;
    max-height:200px;
    float:left;
    text-align: center;
}

margin: 0px 10px表示顶部和底部的0px边距，以及左侧和右侧的10px边距。也许人们会期望div之间的20px裕度，但有一种叫做"裕度崩溃"的效应可以防止这种情况发生。

这就是您想要的吗http://jsfiddle.net/Gfnjz/

.box {
display:table;
table-layout:fixed;
min-width:900px;         /* some minimum width is a good idea. */
border-spacing:20px 0;   /* note that spacing is also applied to right and left ends */
background-color:#666;
margin:0 auto;
 }
 .box div {
display:table-cell;
width:33%;
vertical-align:middle;
border:1px solid #bbb;
background-color:#eee;
padding:30px;
 }

您可以这样做：

.divName{
    width:300px;
    display: inline-block;
    margin: 0 20px 0 0;
    float: left;
}

然后，对于最后一个框，也应用.lastBox类来强制无边距，这样它们就完全居中了，假设您的父容器居中，即：

.lastBox{
    margin-right: 0;
}

HTML：

<div class="divName">
    <p>stuff</p>
</div>
<div class="divName">
    <p>stuff</p>
</div>
<div class="divName lastBox">
    <p>stuff</p>
</div>

如果您只希望"imgbott"div之间有相同的空间，请设置它们的margin而不是width属性。

你的课看起来像

.imgbott{
    margin: 0px 10px;
    float: left;
    text-align: center;
}
.imgbott a 
{
    display:block;
}

然后不管里面的图像宽度是多少，图像之间的空间总是20像素。

另外，您可以使用第一个子选择器删除第一个图像的左边空白

.imgbott:first-child {
    margin-left:0px;
}

您可以通过使用inline-block s和text-align: justify，在要通过伪元素对齐的div前后添加一些伪内容来实现此结果：

.maindiv{
    width:90%;
    border: 2px solid red;
    text-align: justify; /* turns on justification 'magic' */
    line-height: 0; /* removes extra space below divs because of extra line */
}
.maindiv:before {        
    font-size: .1px;
    content: 'i'; /* adds nearly invisible fake content in the beginning of the line */
}
.maindiv:after {    
    font-size: .1px;
    content: 'i i'; /* adds nearly invisible fake content in the of the line */
    word-spacing: 99in; /* huge word-spacing assures that the 2nd 'i' wraps to the next line making 'justify' work */
    background: #ccc;
}
.imgbott{
    display: inline-block;
    line-height: 1; /* restore the normal line height inside divs */
}

JSFiddle

可选地，如果容器比其宽度之和窄，您可以通过将white-space: nowrap添加到容器并将normal添加到其:after来禁止包装div：请参阅编辑的JSFiddle

这个解决方案看起来可能有点棘手，但它适用于任意数量的任意（可能不同）宽度的块。

相关内容

最新更新

热门标签：