Question

我正在开发一个3柱的网站，我正在转换为RWD，之前已经布置了令人讨厌的负px边距，但我将所有这些转换为百分比和em，以便该网站最适合广泛的范围设备。

我的问题非常类似于这里可以看到的帖子; HTML float right element order

我已经尝试了@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/，我非常感激，我提前感谢你们每个人。

Answer 1

你的代码非常草率和混乱，你在那里有很多无关紧要的东西，但是由于你写得不多，我认为你最好重新开始。

我写了一个基本的三列布局，可以让你开始做你想做的事情。我也允许它像你想要的那样是流体（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/ 缩小“结果”窗口以查看其运行情况;）

Answer 2

我不知道为什么你有这么多包装纸，但移动你的容器会得到你想要的东西。 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/

Answer 3

我设法做了或多或少你所要求的（除了你的“分享这个”列，这不在那里）把前两列放在MidBG div中，我向左浮动。然后我向右浮动第一列，使第二列在第一列之前结束，第三列向右结束。
我还必须删除大量的width:100% s，这搞砸了。

请参阅fiddle。

不确定这是否是您想要的，但这是您要求的......

3列站点列向左浮动但未按正确顺序出现

3 个答案: