水平并排div div

我想让我的照片和说明div水平排列在一条直线上。有3个不同的div，我想水平并排。当我使用float时，它不会允许我：left。我已经尝试了几天，但它仍然无法正常工作。如果有人能帮我弄清楚这一点，我将不胜感激。每个描述前都有图像，但现在将显示在下面的预览中。这里是我下面的代码：水平并排div div

#content { 
 
    width: 100px; 
 
    height: 600px; 
 
    margin-top: 10px; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
    margin-bottom: 10px; 
 
    float: left; 
 
} 
 

 
#1 { 
 
    float: left; 
 
    width: 300px; 
 
    height: 300px; 
 
    padding-top: 25px; 
 
    padding-right: 25px; 
 
    padding-bottom: 25px; 
 
    padding-left: 25px; 
 
} 
 

 
#2 { 
 
    float: left; 
 
    width: 300px; 
 
    height: 300px; 
 
    padding-top: 25px; 
 
    padding-right: 25px; 
 
    padding-bottom: 25px; 
 
    padding-left: 25px; 
 
} 
 

 
#3 { 
 
    float: left; 
 
    width: 300px; 
 
    height: 300px; 
 
    padding-top: 25px; 
 
    padding-right: 25px; 
 
    padding-bottom: 25px; 
 
    padding-left: 25px; 
 
}

<div id="Content"> 
 
    <div id="1"> 
 
    <p><img src="http://beerhold.it/300/300" height="300px" width="300px" alt="Project 1"></p> 
 
    <p>Description, Description, Description</p> 
 
    </div> 
 

 
    <div id="2"> 
 
    <center> 
 
     <p><img src="http://beerhold.it/300/300" height="300px" width="300px" alt="Project 2"></p> 
 
    </center> 
 
    <center> 
 
     <p>Description, Description, Description</p> 
 
    </center> 
 
    </div> 
 

 
    <div id="3"> 
 
    <p><img src="http://beerhold.it/300/300" height="300px" width="300px" alt="Project 3"></p> 
 
    <p>Description, Description, Description</p> 
 
    </div> 
 

 

 
</div>

来源

2017-02-20 mestrickler

看看[Flexbox的（https://css-tricks.com/snippets/ css/a-guide-to-flexbox /），但你的问题似乎是你有一个与图像大小相同的div，但你也在div中有文本。此外，您的内容容器 - 如果你的案件正确的ID只有100px宽当每个div是300px - 你如何期望他们适合在同一行？ – Pete

你也可以让＃div div内的#include div显示：inline-block; ＃content> div {display：inline-block;} – kerwan

您在代码中有一些错误

您的容器只有100像素宽，使其变大。
如果应用了相同的属性，用类，而不是不重复自己在CSS
不要使用width/height HTML属性，而不是使用CSS属性
CSS是区分sensative 。 #Content和#content
不使用center html，因此不推荐使用。

使用Flexbox的，这样可以达到一个负责任的布局容易

#content { 
 
    max-width: 900px; 
 
    height: 600px; 
 
    margin: 10px; 
 
    display: flex; 
 
    border: red solid; 
 
} 
 

 
.divs { 
 
    padding: 25px 
 
} 
 

 
img { 
 
    max-width: 100% 
 
}

<div id="content"> 
 
    <div class="divs" id="1"> 
 
    <p><img src="//placehold.it/300x300" alt="Project 1"></p> 
 
    <p>Description, Description, Description</p> 
 
    </div> 
 

 
    <div class="divs" id="2"> 
 
    <p><img src="//placehold.it/300x300" alt="Project 2"></p> 
 
    <p>Description, Description, Description</p> 
 
    </div> 
 

 
    <div class="divs" id="3"> 
 
    <p><img src="//placehold.it/300x300" alt="Project 3"></p> 
 
    <p>Description, Description, Description</p> 
 
    </div> 
 

 

 
</div>

来源

2017-02-20 16:59:51 dippas

水平并排div div

回答

相关问题