Question

您好我想创建一个左标签布局：

tab1  |   content for selected tab
------|   Here it is tab2
tab2   >  content from other tab is
------|   hidden
tab3  |
------|------------------------------

但我想让我的组织保持如下：

 <h3 id="tab1"> tab1 </h3>
 <div class="content"> content for tab1 </div>

 <h3 id="tab2"> tab2 </h3>
 <div class="content"> content for tab2 </div>
 ...

知道内容是可变的。有没有一种已知的方法来实现这一目标？或者我必须更改选项卡的组织吗？

我尝试使用固定宽度的浮点数，但是当tab1的内容消失并且我显示tab2的内容时，块tab2显示在tab1附近：

tab1 | tab 2 |
--------------
|  Content for tab 2 
|
|_____________________
tab3 |

谢谢！

修改

更清楚我想要一个标签行为。我的意思是，所有内容都应占据相同的空间。

Answer 1

可能你可以这样写：

h3, .content{
    float:left;
}
h3{clear:both;margin-right:20px;}

选中此http://jsfiddle.net/LC3Qd/1/

Answer 2

我想你可以添加：

h3{ float: left; width: 50px;clear: left;}
.content{float: right;}

显然，实现此布局的最简单方法是编写像

这样的标记

<div class="float-left">
 <h3>1</h3>
 <h3>2</h3>
</div>
<div class="float-left">
 <div>content1</div>
 <div>content2</div>
</div>

但据我了解你更愿意避免它。我仍然认为这是正确的方法

垂直CSS选项卡，同时保持div在部分中组织

2 个答案: