Question

我目前正在学习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

谢谢。

Answer 1

将您的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的边距，但是有一种叫做“边缘折叠”的效果会阻止它。

Answer 2

这就是你要找的东西 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;
 }

Answer 3

您可以这样做：

.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>

Answer 4

如果您只想在“imgbott”div之间使用相同的空格，请设置其边距而不是width属性。

你的课程看起来像

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

然后无论内部图像的宽度是多少，图像之间的空间总是20px。

另外，您可以使用第一个子选择器

删除第一个图像的左边距

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

Answer 5

您可以使用inline-block和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：see { {3}}

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

如何在1 div内分隔3 div

5 个答案: