0

I'm currently learning HTML. I'm trying to add 3 images inside a div, the images need to have the same amount of space between them. How to do this?

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

The code I currently have:

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

Code runing: https://script.google.com/a/macros/itcld.com.br/s/AKfycbyjeAIFhKnAXzvXd8lS3S-ND4H0n63i-FBxr-i9Z1omeFmBYtA/exec

Thank you.

4

5 回答 5

0

将您的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左右边距。也许人们会期望20pxdiv 之间有边距，但是有一种叫做“边距折叠”的效果可以防止这种情况发生。

于 2013-08-21T13:59:31.267 回答
0

你可以这样做：

.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>
于 2013-08-21T14:03:21.223 回答
0

这是你在找什么 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;
 }
于 2013-08-21T14:00:28.930 回答
0

如果您只希望“imgbott” div 之间有相同的空间，请设置它们的边距而不是宽度属性。

你的课看起来像

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

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

此外，您可以使用 first-child 选择器删除第一张图像的左边距

.imgbott:first-child {
    margin-left:0px;
}
于 2013-08-21T14:51:15.100 回答
0

您可以通过使用inline-blocks 和来实现此结果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中来禁止 div 的换行:after：请参阅编辑的 JSFiddle

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

于 2013-08-21T15:09:27.833 回答