Question

我试图将目前彼此相邻的4个div对齐20px的边距＆＃34;顶部，底部，左侧，右侧＆＃34;

我试图添加display：inline;到容器显示它们所有内联但是没有工作，我也试图将它们向左浮动，仍然没有工作。

有人可以向我解释如何让4个div显示在彼此旁边而不会为他们添加不同的位置吗？

HTML：

<div class="container">
<div class="img"><center><img src="http://1.bp.blogspot.com/_1eIdJ43s3yE/Sw1h8khv0FI/AAAAAAAAEic/L0FzKdsbxkU/s1600/usa-flag.jpg" alt="" width="194" height="194"/></center>    </div>
<div class="title" id="title"><i>Lorem Ipsum</i></div>
<div class="text"><i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</i></div>
<div class="button"><a href="#">text link</a><div/>
</div>

CSS：

body {
background-color: #BDC3C7;
}
.container{
position:absolute;
background-color:#ECF0F1;
width:300px;
height:550px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.title{
height:35px;
}
#title{ color:white;
font-size:28px;
text-align:center;
background-color:navy; 
background-image:url(img/strip.jpg);}

.img{ background-color:#2C3E50; 
-webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px;
border-top-left-radius: 20px; border-top-right-radius: 20px;
}
.text{
font-size:18px;
margin-top:15px;
margin-left:25px;
margin-right:25px;
}
.button{
width:100%;
height:33px;
background-color:#2C3E50; 
position: absolute;
bottom: 0;
font-size:25px; text-align:center;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
a { text-decoration:none }
a:link {color:#2ecc71;}
a:hover {color:#3498db;}

Answer 1

我看到的主要问题是div的结束.button代码是<div/>而不是</div>。通过这些修复，我可以使用float: left

将它们全部对齐

我还注意到您希望.button位于容器的最底部。由于您使用position: absolute来实现这一目标，.button在bottom: 0处于彼此之上。为了解决这个问题，我将每个容器设为relative。

.container {
  position: relative;
  float: left;

  /* Other rules */
}

小提琴：http://jsfiddle.net/TNP8u/

Answer 2

＆＃13;

#div {
  border: 1px solid green;
  height: 10pc;
  width: 30pc;
}

.inner {
  border: 1px solid blue;
  height: 10pc;
  width: 7pc;
  display: inline-block;
}

＆＃13;

<div id="div">
  <div class="inner">
  </div>
  <div class="inner">
  </div>
  <div class="inner">
  </div>
  <div class="inner">
  </div>
</div>

＆＃13;

我知道这并没有用您的代码回答您的问题，但它与您正在寻找的内容类似。

Answer 3

你的html中有一些错误可能是你沮丧的根源。

html的主要问题是你没有正确关闭.button div。另一个问题是您多次使用相同的ID。那是无效的。

另外，我删除了已弃用且不需要的代码和css。请永远再次使用<center>，好吗？答应我。 2014年，中心标签无处可去。;-)我将其替换为margin: 0 auto;。如果你不了解它的作用，你可以查看如何在css中居中。

我已经清理了你的小提琴here

<强> HTML：

<div class="container">
    <div class="img"><img src="http://1.bp.blogspot.com/_1eIdJ43s3yE/Sw1h8khv0FI/AAAAAAAAEic/L0FzKdsbxkU/s1600/usa-flag.jpg" alt="" width="194" height="104"/></div>
    <div class="title"><i>Lorem Ipsum</i></div>
    <div class="text"><i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</i></div>
    <div class="button"><a href="#">text link</a></div>
</div>
<!-- 2 -->
<div class="container">
    <div class="img"><img src="http://1.bp.blogspot.com/_1eIdJ43s3yE/Sw1h8khv0FI/AAAAAAAAEic/L0FzKdsbxkU/s1600/usa-flag.jpg" alt="" width="194" height="104"/></div>
    <div class="title"><i>Lorem Ipsum</i></div>
    <div class="text"><i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</i></div>
    <div class="button"><a href="#">text link</a></div>
</div>
    <!-- 3 -->
<div class="container">
    <div class="img"><img src="http://1.bp.blogspot.com/_1eIdJ43s3yE/Sw1h8khv0FI/AAAAAAAAEic/L0FzKdsbxkU/s1600/usa-flag.jpg" alt="" width="194" height="104"/></div>
    <div class="title"><i>Lorem Ipsum</i></div>
    <div class="text"><i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</i></div>
    <div class="button"><a href="#">text link</a></div>
</div>
    <!-- 4 -->
<div class="container">
    <div class="img"><img src="http://1.bp.blogspot.com/_1eIdJ43s3yE/Sw1h8khv0FI/AAAAAAAAEic/L0FzKdsbxkU/s1600/usa-flag.jpg" alt="" width="194" height="104"/></div>
    <div class="title"><i>Lorem Ipsum</i></div>
    <div class="text"><i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</i></div>
    <div class="button"><a href="#">text link</a></div>
</div>

CSS：

body {
    background-color: #BDC3C7;
}
.container{
    background-color:#ECF0F1;
    width:300px;
    height:450px;
    border-radius: 20px;
    float: left;
    position: relative;
    margin-left: 20px;
}   
.title {
    height:35px;
    color:white;
    font-size:28px;
    text-align:center;
    background-color:navy;
    background-image:url(img/strip.jpg);
}
.img{ 
    background-color:#2C3E50; 
    border-radius: 20px 20px 0 0;
}
img {
    display: block;
    margin: 0 auto;
    padding: 10px;
}
.text{
  font-size:18px;
  margin-top:15px;
  margin-left:25px;
  margin-right:25px;
}
.button{
    width:100%;
    height:33px;
    background-color:#2C3E50; 
    position: absolute;
    bottom: 0;
    font-size:25px; text-align:center;
    border-radius: 0 0 20px 20px;
}
a { 
    text-decoration:none;
}
a:link {
    color:#2ecc71;
}
a:hover {
    color:#3498db;
}

我如何对齐这些div容器

3 个答案: