0

我正在开发一个 3 列站点，我正在将其转换为 RWD，并且之前以令人讨厌的 neg px 边距布局，但我正在将所有这些转换为百分比和 em，以便该站点最适合各种设备。

我的问题与可以在此处看到的帖子非常相似； HTML浮动右元素顺序

我已经尝试了@bookcassey 在这篇文章中的建议，方法是将所有列放在一个向右浮动的容器中，其中所有子元素都向左浮动，但即使这样做我仍然无法按 #NavColumn # 的顺序获取列内容列#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

MidBG通过将前两列放在我向左浮动的 div 中，我设法或多或少地完成了您的要求（除了您的“共享此”列，它不存在） 。然后我将第一列向右浮动，使第二列在第一列之前结束，第三列在右侧结束。
我还必须删除很多width:100%s，这把事情搞砸了。

见小提琴。

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

于 2013-10-10T19:14:24.967 回答
0

您的代码非常草率且杂乱无章，并且您在其中有很多无关的东西，但是由于您写的不多，我认为最好从头开始。

我写了一个基本的三栏布局，可以让你开始你想做的事情。我还允许它按照您的意愿流动（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

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