我不是真正进入Css而且我很难将所有内容整合到标签内，我真的很感激，如果有人可以建议如何制作它，到目前为止我能够设计一下但是我可以真的能让它正常运作
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background:#FFF;
}
#page-wrap {
padding: 0;
margin: 0px;
width: 100%;
font: 13px/1 'Open Sans', arial;
background:#FFF;
}
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear:both;
margin: 25px 0;
border:1px solid #dcdcdc;
background:none repeat scroll 0 0 #f7f7f7;
font:13px/1 'Open Sans', arial;
color:#868883;
max-width:1500px;
}
.tab {
/*height: 40px;*/
width:20%;
}
.tab label {
display:block;
cursor:pointer;
margin:auto;
border:1px solid #dcdcdc;
padding-left:28px;
border-top:none !important;
height:56px;
line-height:54px;
text-align:left;
text-decoration:none;
text-transform:uppercase;
}
.tab label:hover {
color:#000;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 0px;
left: 200px;
background: white;
right: 0;
bottom: 0;
padding: 20px;
}
[type=radio]:checked ~ label {
background: white;
z-index: 2;
font-size:13px;
color:#000;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
</style>
容器高度也必须相同，没有任何scroolbar，
这是我使用的Html和css代码 jsfiddle
基本上我需要根据里面的文字包装所有标签，如下面的例子
<style>
.tabs {
font-size: 0;
margin: 25px 0;
}
.tabs:after {
clear: both;
content: '';
display: table;
}
.tabs .tab {
display: inline;
}
.tabs .tab-label {
background: #eee;
border: 1px solid #ccc;
display: inline-block;
font-size: 16px;
font-size: 1rem;
left: 1px;
margin-left: -1px;
padding: 10px;
position: relative;
vertical-align: bottom;
}
.tabs .tab > [type="radio"] {
clip: rect(0 0 0 0);
height: 1px;
opacity: 0;
position: fixed;
width: 1px;
z-index: -1;
}
.tabs .tab-panel {
display: inline;
display: inline-block;
overflow: hidden;
position: relative;
height: 0;
width: 0;
}
.tabs .tab-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
background: white;
padding: 0 20px;
border: 1px solid #ccc;
float: left;
font-size: 16px;
font-size: 1rem;
margin-top: -1px;
width: 100%;
}
.tabs .tab [type="radio"]:checked + .tab-label {
background: white;
border-bottom-width: 0;
padding-bottom: 11px;
z-index: 1;
}
.tabs .tab [type="radio"]:checked ~ .tab-panel {
display: inline;
}
</style>
<div class="tabs">
<div class="tab">
<input class="tab-radio" type="radio" id="tab-1" name="tab-group-1" checked>
<label class="tab-label" for="tab-1">Huh? Tabs again?</label>
<div class="tab-panel">
<div class="tab-content">
<h3>Why would this be cool?</h3>
<p>First look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'First look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This mFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'First look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This muFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'First look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This muFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'First look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This muFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'First look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This muFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'First look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This muFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'First look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This muFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'First look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This muust be done by Chris Coyier'sFirst look at the HTML structure: all elements related to one tab are within one block. Now think about that for a while. This must be done by Chris Coyier'ss <a href="http://css-tricks.com/functional-css-tabs-revisited/">Functional CSS Tabs Revisited</a> already, right?</p>
<p>Maybe. But then you may notice another thing: Chris' example uses absolute positioning for the content. This means the tabs must be of fixed height. Yet these tabs here certainly aren't!</p>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-2" name="tab-group-1">
<label class="tab-label" for="tab-2">Variable height content</label>
<div class="tab-panel">
<div class="tab-content">
<h3>What is this devilry?</h3>
<p>First of all we are working with inline content here and being smart about it. We eliminate white space using the dirty but sufficient zero font-size.</p>
<p>There is one additional element in comparison to what Chris had: <code>.tab-panel</code> element, which works as a container for the <code>.tab-content</code> element. The panel is inline-block by default, which means it can take styles like overflow, position, and width and height. We set these to zero size, use <code>overflow: hidden;</code> and <code>position: relative;</code> so that <code>.tab-content</code> disappears. For the active tab we do only one style change and it happens to the <code>.tab-panel</code> element: we make it inline! Thus it no longer follows the other rules that bind inline-block. As a result it's child element will start following the flow of the next container element up in the tree.</p>
<p>As for the <code>.tab-content</code> element it is floated and has a width of 100%. The neat thing about this combination is that it forces the element to go below the row where you can see the tab buttons.</p>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-3" name="tab-group-1">
<label class="tab-label" for="tab-3">Browser support</label>
<div class="tab-panel">
<div class="tab-content">
<h3>The support must be poor!</h3>
<p>The CSS only part of this solution works in Internet Explorer 9+. All the other browsers are supported from so far back that it is enough to tell this works on Firefox, Chrome, Safari and Opera.</p>
<p>The JavaScript is quite simple and it is for IE8 and below. It does no harm to other browsers, but you probably want to hide it behind IE conditional comments: <code><!--[if lte IE 8]> … <![endif]--></code></p>
</div>
</div>
</div>
</div>
THX
答案 0 :(得分：0)
试试这个
.content{overflow-y: scroll;}
答案 1 :(得分：0)
将overflow:auto添加到.content，如下所示： Demo
.content {
position: absolute;
top: 0px;
left: 200px;
background: white;
right: 0;
bottom: 0;
padding: 20px;
overflow:auto;
}
<强>更新：
尝试为display none和content添加block checked Demo
[type=radio]:checked ~ label ~ .content {
display:block;
}
.content {
display:none;
}
答案 2 :(得分：0)
在内容中尝试此内容：
.content {
word-wrap:break-word;
overflow:hidden
position: absolute;
top: 0px;
left: 200px;
background: white;
right: 0;
bottom: 0;
padding: 20px;
}