Question

这是我的http://jsfiddle.net/8wSzk/2/

<div class="row1">
<div>
    <div class="circle-menu">
    </div>
    <p> some option </p>
</div>
<div>
    <div class="circle-menu">
    </div>
    <p> some option <br /> and <br /> another option </p>
</div>
</div>
<div class="row2">
<div>
    <div class="circle-menu">
    </div>
    <p> circle3 </p>
</div>
<div>
    <div class="circle-menu">
    </div>
    <p> circle4 </p>
</div>
</div>

我希望我的两个圆圈都在一条直线上，其内容位于圆圈下方。有人可以帮我修理我的CSS。我很陌生。

Answer 1

我认为这就是你想要的。如果要将两个元素并排放置，则必须使用float属性。在这种情况下，它将是float:left;。

修改 NEW DEMO

Answer 2

这样做

<div class="row1">
    <div>
        <div class="circle-menu">
        </div>
    </div>
    <div>
        <div class="circle-menu">
        </div>
    </div>
</div>
<div class="row1">
    <div>
        <p> some option </p>
    </div>
    <div>
        <p> some option <br /> and  another option </p>
    </div>
</div>

Answer 3

New fiddle Code:Works Perfect

你在这里交配，为你重做。仔细看看，看看我做了什么

<div class="row1">
<div class="circle-menu">
</div>
<div class="circle-menu">
</div>
</div>
<div class="options-row">
<div class="option">Some option
</div>
<div class="option">Some more options
</div>
</div>
<div class="row2">
<div class="circle-menu">
</div>
<div class="circle-menu">
</div>
</div>
<div class="options-row">
<div class="option">Even more options
</div>
<div class="option">Got the idea?
</div>
</div>

.row1 {
height:90px;
}
.row2 {
height:90px;
}
.circle-menu {
width: 80px;
height: 80px;
display: inline-block;
float:left;
background-color: #cacece; 
border-radius: 50%;
-moz-border-radius: 50%; 
-webkit-border-radius: 50%;
cursor: pointer;
margin: 5px;
}
.option {
display:inline-block;
width:80px;
margin: 5px;
text-align:center;
vertical-align:top;    
}
.options-row {

}

有内容的恼人的div

3 个答案: