Question

我正在使用纯CSS创建我的第一个网站。

这是我内容的结构，这是我想要获得的：

我基本上有3列。每个元素包含具有不同宽度的不同元素。我希望这些列并排放置在大屏幕上，在小屏幕上，它们必须一个在另一个屏幕下面。如果有多余的水平空间，我希望增加每列的填充。

页脚必须始终位于页面末尾，以便始终可见。

这是我的代码：JsFiddle。

html：

<div class="topnav">
    <span id='titlePage'><a href="#">Title page</a></span>
    <span class='linkPage'><a href="#">link1</a></span>
    <span class='linkPage'><a href="#">link2</a></span>
</div>

<div class="row">
    <div class="column" id='col1'>
        <div class='colTitle'><h3>Column 1 title</h3></div>
        <div class='colContent' id='col1Content'>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
        </div>
        <div class='colContentBottom' id='colContenteBottomCol1'></div>
    </div>

    <div class="column" id='col2'>
        <div class='colTitle'><h3>Column 2 title</h3></div>
        <div class='colContent' id='col2Content'>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
        </div>
        <div class='colContentBottom' id='colContenteBottomCol2'></div>

    </div>

    <div class="column" id='col3'>
        <div class='colTitle'><h3>Column 3 title</h3></div>
        <div class='col3Content' class='colContent'><p>col 3 row 1</p></div>
        <div class='col3Content' class='colContent'><p>col 3 row 2</p></div>
        <div class='col3Content' class='colContent'><p>col 3 row 3</p></div>
</div>

<div class='row'>
    <div id='footer'>
        <div id='f1'></div>
        <div id='f2'></div>
        <div id='f3'></div>
        <div id='f4'></div>
    </div>
</div>

css：

/**
 * Color
 */
:root {
    --cWhite:white;
    --cBlack: black;
    --cDarkGrey: #333333;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-size: 8pt;
    font-family: 'Roboto', sans-serif;
}

/** 
 * Style the top navigation bar
 */
.topnav {
    overflow: hidden;
    background-color: var(--cDarkGrey);
}
.topnav a {
    float: left;
    display: block;
    color: var(--cWhite);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.topnav a:hover {
    background-color: var(--cWhite);
    color: var(--cBlack);
}

#titlePage {
    font-size: 22pt;
    line-height: 18px;
    color: var(--cWhite);
    vertical-align: middle;
    display: inline-block;
}

.linkPage {
    font-size: 11pt;
    color: var(--cWhite);
    vertical-align: middle;
    display: inline-block;
}

/** 
 * Create three equal columns that floats next to each other
 */
.column {
    float: left;
    padding: 15px;
}
#col1 {
    background-color:  #FF5733;
    min-width: 400px;
    float: left;
    width: 100%;
}

#col2 {
    background-color:  #FFC300;
    min-width: 550px;
    float: left;
    width: 100%;
}

#col3 {
    background-color:  #DAF7A6;
    min-width: 350px;
    float: left;
    width: 100%;
}

.colContent {
    border: 1px solid black;
}
.colContentBottom {
    height: 20px;
    border: 1px solid black;
}

#col1Content {
    width: 400px;
    height: 400px;
}
#colContenteBottomCol1 {
    width: 400px;
}

#col2Content {
    width: 550px;
    height: 450px;
}
#colContenteBottomCol2 {
    width: 550px;
}

.col3Content {
    width: 350px;
    height: 150px;
    border: 1px solid black;
}

/**
 * Clear floats after the columns
 */
.row {
    width: 100%;
    background-color: lightgrey;
    border: 1px solid red;
    align-content: center;
    margin: 0 auto;
    padding: 0px; /* is that the right way to add white space between header/footer and content site? */
    width: 900px; /* I don't hink this rule is necessary but if I remove it, there is a strange behaviur */
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

/**
 * Footer
 */
#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--cDarkGrey);
    color: var(--cWhite);
    text-align: center;
}

#f1 {
    float: left;
    display: inline-block;
    border: 1px solid white;
    width: 300px;
    height: 60px;
    margin: 3px;
}

#f2 {
    float: left;
    display: inline-block;
    border: 1px solid white;
    width: 250px;
    height: 60px;
    margin: 3px;
}

#f3 {
    float: left;
    display: inline-block;
    border: 1px solid white;
    width: 220px;
    height: 60px;
    margin: 3px;
}

#f4 {
    float: left;
    display: inline-block;
    border: 1px solid white;
    width: 180px;
    height: 60px;
    margin: 3px;
}

/**
 * Responsive layout - makes the three columns stack on top of each other instead of next to each other
 */
@media screen and (max-width:600px) {
    .column {
        width: 100%;
    }
}

这是糟糕的结果：

有人可以帮助我吗？

Answer 1

在您发表评论之后，以下代码可能是一个好的起点吗？

	
h2 {
	font-size: 18px;
	color: #ffffff;
}
#one {
	background-color: #FF0000;
}
#two {
	background-color: #FFC000;
}
#three {
	background-color: #EBF1DF;
}
.box {
	padding: 50px;
}
.box-in {
	height: 450px;
	background-color: grey;
	margin-bottom: 2px;
}
	
.box-in-in {
	height: 150px;
	background-color: grey;
	margin-bottom: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div id="one" class="col-xs-12 col-md-4 col-sm-6 box">
    <h2>Title here</h2>
    <div class="col-xs-12 box-in"></div>
  </div>
  <div id="two" class="col-xs-12 col-md-4 col-sm-6 box">
    <h2>Title here</h2>
    <div class="col-xs-12 box-in"></div>
  </div>
  <div id="three" class="col-xs-12 col-md-4 box">
    <h2>Title here</h2>
    <div class="col-xs-12 box-in-in"></div>
    <div class="col-xs-12 box-in-in"></div>
    <div class="col-xs-12 box-in-in"></div>
  </div>
</div>

具有固定宽度和页脚的列的布局始终可见

1 个答案: