0

有没有一种方法可以将 4 个 div 对齐在一起，使它们都整齐地内联，我在一个 div 中有一个图像，在另一个 div 中有标题，在其他单独的 div 中有文本和另一个图像，但我希望它们看起来一致。见小提琴 

<div id="christmas_product_boxes">
    <div id="christmas_mattress">
        <img src="http://blog.applause.com/wp-content/uploads/2013/05/one_star.jpg" height="100px" width="100px">
    </div>
    <div id="christmas_pillows">
        <img src="http://blog.applause.com/wp-content/uploads/2013/05/one_star.jpg" height="100px" width="100px">
    </div>
    <div id="christmas_beds">
        <img src="http://blog.applause.com/wp-content/uploads/2013/05/one_star.jpg" height="100px" width="100px">
    </div>
</div>
<br>
<br>
<div id="christmas_product_boxes_title">
    <div id="christmas_mattress_title">
        <h2>Title 1</h2>
    </div>
    <div id="christmas_pillow_title">
        <h2>Title 2</h2>
    </div>
    <div id="christmas_beds_title">
        <h2>Title 3</h2>
    </div>
</div>
<div id="christmas_product_boxes_text">
    <div id="christmas_mattress_text">
        <p>This is some text in a p tag!! <br>This is some text in a p tag!! <br>This is some text in a p tag!!</p>
    </div>
    <div id="christmas_pillow_text">
        <p>This is some text in a p tag!! <br>This is some text in a p tag!! <br>This is some text in a p tag!!</p>
    </div>
    <div id="christmas_beds_text">
        <p>This is some text in a p tag!! <br>This is some text in a p tag!! <br>This is some text in a p tag!!</p>
    </div>
</div>
<div id="christmas_product_boxes_buttons">
    <div id="christmas_mattress_button">
        <a href="#"><img src="http://www.downloadclipart.net/large/253-button-blue-design.png" height="30px" width="30px"></a>
    </div>
    <div id="christmas_pillow_button">
        <a href="#"><img src="http://www.downloadclipart.net/large/253-button-blue-design.png" height="30px" width="30px"></a>
    </div>
    <div id="christmas_beds_button">
        <a href="#"><img src="http://www.downloadclipart.net/large/253-button-blue-design.png" height="30px" width="30px"></a>
    </div>
</div>
4

2 回答 2

0

一个好的开始是改变你创建 html 结构的方式。您正在尝试水平组织内容。您正在div将您的“感兴趣的对象”（在本例中为盒子）分成许多部分。我并不是说这是错误的，但它看起来很奇怪（至少对我来说）。

“横向方式”：http: //jsfiddle.net/felipemiosso/yUgLw/3/

现在，这个怎么样：http: //jsfiddle.net/felipemiosso/yUgLw/2/

它不是比其他方式更简单，更容易看到吗？无论如何......你给你一个北方的你需要改变你的代码正常工作的小提琴。希望能帮助到你 ：）

只是关于您的代码的注释：您不应该id在代码中重复该属性。div id 和 div 类的区别

于 2013-10-31T13:50:44.463 回答
0

像这样的东西怎么样：

小提琴：http: //jsfiddle.net/6Lrdp/1/

按照小提琴将这些样式应用于大多数容器。

width: 130px;
margin:0 10px 0 50px
text-align: center;

您将不得不弄乱尺寸。. .

于 2013-10-31T13:27:12.427 回答