0

私は RWD に変換している 3 列のサイトで作業しており、以前は厄介な負の px マージンでレイアウトされていましたが、サイトが幅広いデバイスに最適になるように、これらすべてをパーセンテージと em に変換しています。

私の問題は、ここで見ることができる投稿と非常によく似ています。 HTML float 右要素順序

この記事で @bookcassey が提案したことを試しましたが、すべての列をコンテナーに配置し、すべての列を右にフロートさせ、内部のすべての子要素を左にフロートさせましたが、これを行っても #NavColumn の順序で列を取得できません # ContentColumn #ExtraColumn.

HTMLは

<!DOCTYPE html>

<html>

<head>

<title>3 Col Page</title>

<meta name='description' content='Sample 3 Column Page'>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="./support-files/landscapemobile.css" />

<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" />

</head>
<body>

<div id="PageWrapper">
    <div id="Header">
    <div class="Liner">

    Header Links Etc

    </div> <!-- End Header Liner -->
    </div> <!-- End Header -->

    <!-- Begin Center Column Content -->
    <div class="OuterBG threecol"> <!-- disregard. There are no rules for this. This was part of a tut-->
    <div class="MidBG"> <!-- disregard. There are no rules for this. This was part of a tut-->
    <div class="InnerBG">
    <div id="ContentColumn"> <!-- col1 in tut -->
    <div class="Liner">

<h1>Page Headline</h1>

Page Content, Images Lorem Upsim etc...

</div> <!-- End Content Column -->
</div> <!-- End Liner -->

<div id='NavColumn'>
<div class='Liner'>
<div class='Navigation'>
Site 
Navigation
Links
</div><!-- end Navigation -->        
</div><!-- end Navigation Liner -->
</div><!-- end NavColumn -->

<div id='ExtraColumn'>
<div class='Liner'>
Extra
Column 
Content
</div><!-- END Extra Column Liner-->
</div><!-- END ExtraColumn -->


</div><!-- END colleft -->
</div><!-- END colmid -->
</div><!-- END colmask and threecol -->
<div id='Footer'>
Footer Content, Address etc...
</div>
</div><!-- END PageWrapper -->

</body>
</html>

そして、CSS

#PageWrapper{ 
    margin:1em auto;
    max-width:60em; /*960px / Default Font Size of 16px = em result*/
    border:0.3125em groove #DDDDDD;
    background-image:url(../image-files/background.gif);
    background-repeat:repeat-y;
}

.InnerBG{float:right;/*border:3px solid red;*/width:100%;}

#Header{position:relative;}

#Header .Liner{padding:0;}

#Header a.header-home-link{max-width:60em;display:block;}

#Header img{display:block;}

#ShareThis{width:100%;margin:1em auto 2em;}

#NavColumn, #ContentColumn, #ExtraColumn {float:left;}

#ContentColumn{max-width:62.50%;/*border:2px solid green;*/width:100%;}

#NavColumn{max-width:18.645833333%;text-align:center;font-size:90%;color:#000;width:100%;}

#ExtraColumn{max-width:18.645833333%;text-align:center;font-size:90%;color:#000;width:100%;}

補足: 色付きの列は、各列を「見よう」としていたものです。

私は数え切れないほどの数のチュートリアルを経験してきましたが、CSS ルールのすべての可能な組み合わせを無駄にしようとしている間、認めるよりも長くこれに取り組んできました。ここに見られる: http://classifieds.your-adrenaline-fix.com/、私は最も感謝しており、事前にあなたのすべての人に感謝します.

4

3 に答える 3

0

なぜそんなに多くのラッパーがあるのか​​ わかりませんが、コンテナを移動すると、必要なものが得られます. NavColumn、ContentColumn、ExtraColumn の順に続きます。

<div id="PageWrapper">
    <div id="Header">
        <div class="Liner">Header Links Etc</div>
    </div>
    <div class="OuterBG threecol">
        <div class="MidBG">
            <div class="InnerBG">                    
                <div id="NavColumn">
                    <div class="Liner">
                        <div class="Navigation">Site Navigation Links</div>
                    </div>
                </div>
                <div id="ContentColumn">
                    <div class="Liner">
                         <h1>Page Headline</h1>Page Content, Images Lorem Upsim etc...</div>
                    </div>
                <div id="ExtraColumn">
                    <div class="Liner">Extra Column Content</div>
                </div>
            </div>
        </div>
    </div>
    <div id="Footer">Footer Content, Address etc...</div>
</div>

http://jsfiddle.net/rWtDa/

于 2013-10-10T19:00:53.340 に答える
0

あなたのコードは非常にずさんでまとまりがなく、そこには無関係なことがたくさんありますが、あまり書いていないので、最初からやり直すのが最善だと思います.

やりたいことを始めるのに役立つ基本的な 3 列のレイアウトを作成しました。また、必要に応じて流体（RWD）にすることもできました。

サイトを構築するときは、この同じ概念を念頭に置いてください。

<body>
<div id="wrap">
<div id="col1">
</div>
<div id="col2">
</div>
<div id="col3">
</div>
</div<!--end wrap-->
</body>

CSS

#wrap{
width:100%;
}

#col1{
background-color:blue;
width:33.33%;
height:200px;
float:left;
}
#col2{
background-color:red;
width:33.33%;
height:200px;
float:left;
position:relative;
}
#col3{
background-color:green;
float:right;
width:33.33%;
height:200px;
position:relative;
}

@media screen and (max-width:320px){
#col1,#col2,#col3{
    float:none;
    position:static;
    margin:0 auto;
    width:100%;
}
}

それをチェックしてくださいhttp://jsfiddle.net/gZ7MY/ 「結果」ウィンドウを縮小して、実際の動作を確認してください;)

于 2013-10-10T18:52:21.890 に答える
0

MidBG左に浮かせた div に最初の 2 つの列を配置することで、多かれ少なかれあなたが求めていたことを行うことができました (「Share This」列はありませんでした) 。次に、最初の列を右にフロートさせて、2 番目の列が最初の列の前に配置され、3 番目の列が右に配置されるようにしました。
また、多くのwidth:100%s を削除する必要があったため、混乱が生じました。

フィドルを参照してください。

これがあなたが望んでいたものかどうかはわかりませんが、それはあなたが求めたものです...

于 2013-10-10T19:14:24.967 に答える