Question

我试图像这样对齐四个元素：

||=||    B
||A||    C
||=||    D

A是一个图像，其他三个元素是div标签。所有元素都有一个span_2类，其中包含以下CSS：

.span_2 {
  width: 50%;
  display: inline-block;
}

但是，这给了我以下布局：

||=||    B
||A||    
||=||    
  C      D

我知道我可以在所有四个元素上设置float:left，以获得我想要的内容，但我想知道是否还有其他CSS方式？

谢谢！

Answer 1

您可以将B C D元素放在具有相同类span_2的容器div中。

示例：

<img src="image.jpg" class="span_2" />
<div class="span_2">
    <div class="span_2">B</div>
    <div class="span_2">C</div>
    <div class="span_2">D</div>
</div>

为了正确对齐，您还需要在课程中添加vertical-align: top;。

以下是一个例子：http://jsfiddle.net/cCU89/1/

Answer 2

你走了。

<强> HTML

<div id="LeftHold">
    <img src="#">
</div>
<div id="RightHold">
    <div class="Right" id="B"></div>
    <div class="Right" id="C"></div>
    <div class="Right" id="D"></div>
</div>

<强> CSS

#LeftHold{
   width:100px;
   height:100px;
   float:left;
}
#RightHold{
   width:100px;
   height:100px;
   float:left;
}
.Right{
   width:100px;
   height:25px;
}

我希望有所帮助！

没有浮动

你可以用一张桌子！：）

除了浮动之外还有其他任何方式：将元素堆叠到另一个元素的右边？

2 个答案: