1

申し訳ありませんが、添付の写真としてdivのグループを作成するのに問題があります。助けてください

http://imgur.com/J8psv

私の最大の問題は、親div内でdivを並べて配置する必要があることです。実際、次のレベルに進みます。200pxの5番目のdivがある場合は、自動的に2行目に移動します。私はCSSと関係がある必要があることを理解していますが、それはCSSにあまり精通していません。

.div_main_left {
    width: 800px;
        border: 1px solid;
        height: 600px;
        float: left;
        display: table-cell;
}

.div_sec_left {
    width: 200px;
        border: 1px solid;
        height: 75px;
        display: inline;
        float: left;
}

.div_right {
    width: 250px;
        border: 1px solid;
        height: 500px;
        float: right;
        display: table-cell;
}
4

3 に答える 3

1

リストでそれを行い、リスト自体のスタイルを設定します。差出人：http：//www.alistapart.com/articles/taminglists/

#tabs ul {
margin-left: 0;
padding-left: 0;
display: inline;
} 

#tabs ul li {
margin-left: 0;
margin-bottom: 0;
padding: 2px 15px 5px;
border: 1px solid #000;
list-style: none;
display: inline;
}


#tabs ul li.here {
border-bottom: 1px solid #ffc;
list-style: none;
display: inline;
}
于 2012-11-26T19:07:13.773 に答える
1

あなたはこのようにそれを行うことができます：

HTML

<div id="mainwrapper">
 <div id="leftwrapper">
     <div class="topbox"></div>
     <div class="topbox"></div>
     <div class="topbox"></div>
     <div class="topbox"></div>
     <div id="maincontent"></div>
 </div>
 <div id="rightwrapper">
     <div id="topsidebar"></div>
     <div id="bottomsidebar"></div>
 </div>     
</div>

CSS

#mainwrapper{
 width:1050px;    
}

#rightwrapper{
 width:250px;
 float:left;
}

#leftwrapper{
 width:800px;
 float:left;
}

.topbox{
 float: left;
 width:196px;
 margin-right:4px;
 height:75px;
 background-color:orange;    
}

#maincontent{
 width:100%;
 height:675px;
 background-color:blue;
 clear:both;    
}

#topsidebar
{
 width:100%;
 height:600px;
 background-color:green;    
}

#bottomsidebar{
 width:100%;
 height:150px;    
 background-color:red;
}

これがjsfiddleです

于 2012-11-26T19:30:11.847 に答える
0

あなたはこれから始めることができます： フィドルの例

最初にhtml：

<div id="container">
    <div class="big_left">
        <div class="float_parent">
            <div class="small">200x75</div>
            <div class="small">200x75</div>
            <div class="small">200x75</div>
            <div class="small">200x75</div>
        </div>
        <div class="content">
            The Content;
        </div>
    </div><!-- Big left End -->

    <div class="big_right">
        <div class="right_long">
            250x750
        </div>      
    </div><!-- Big Right End -->
</div>

次に、css：

#container {
    width:1065px;
}
.big_left {
    width:810px;
    float:left;
}
.big_right {
    width:255px;
    float:left;
}
.big_left .float_parent {
    width:800px;
}
.big_left .float_parent .small{
    width:200px;
    height:75px;
    float:left;
}
.big_left .content {
    clear:both;
}
.big_right .right_long {
    width:250px;
    height:750px;
}
于 2012-11-26T19:14:47.053 に答える