使用CSS将列分为两个

时间：2014-11-13 18:30:43

标签： html css

我正在使用非常基本的HTML和CSS我希望使用HTML和CSS将列分成两部分，我的HTML代码段如下所示。

<html>
<head>
    <title>HTML div Tag</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="left1">
        <p>This is discribed in the style sheet as div.left1.</p>
    </div>
    <div class="left2">
        <p>This is discribed in the style sheet as div.left2.</p>
    </div>
    <div class="right">
        <p>This is discribed in the style sheet as div.right.</p>
    </div>
</body>
</html>

CSS片段。

div.left1 {
    background-color:#eeeeee;
    width: 68%;
    height:50%; 
    padding: 0 0 0 0;
    float: left;
}
div.left2 {
    background-color:#eeeeee;
    width: 68%;
    height:50%; 
    padding: 0 0 0 0;
    float: left;
}
div.right {
    background-color:#eeeeee;
    width: 20%;
    height:100%;  
    padding: 0 5% 0 0;
    float: right;
}

我期待输出如下。左侧内容分为两部分，右侧内容排列在页面底部。但是在输出屏幕上，左栏是在右栏之后如何解决这个问题的？

我期待以这种方式输出。

enter image description here

2 个答案:

答案 0 :(得分：1)

我不太确定，如果我找对你，但这是我的建议。

＆＃13;
＆＃13; 
* {
  margin: 0;
  padding: 0;
}
div.left1 {
background-color:#eeeeee;
width: 68vw;
height:50vh; 
padding: 0 0 0 0;
float: left
}
div.left2 {
background-color:#dddddd;
width: 68vw;
height:50vh; 
padding: 0 0 0 0;
float: left
}
div.right {
background-color:#cccccc;
width: 32vw;
height:100vh;  
padding: 0 0 0 0;
float: right
}
＆＃13; 
<html>
<head>
<title>HTML div Tag</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="left1">
<p>This is discribed in the style sheet as div.left1.</p>
</div>
<div class="right">
<p>This is discribed in the style sheet as div.right.</p>
</div>
  <div class="left2">
<p>This is discribed in the style sheet as div.left2.</p>
</div>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

我认为这就是你想要的，但我不确定

CSS 

html, body{
  height:100%;
}
div.left1 {
  background-color:#eeeeee;
  width: 68%;
  height:50%; 
  padding: 0 0 0 0;
  float: left
}
div.left2 {
  background-color:#eeeeee;
  width: 68%;
  height:50%; 
  padding: 0 0 0 0;
  float: left
}
div.right {
 background-color:#eeeeee;
 width: 20%;
 height:100%;  
 padding: 0 5% 0 0;
 float: right;
 vertical-align:top;
}

HTML 

<div class="left1">
  <p>This is discribed in the style sheet as div.left1.</p>
</div>
<div class="right">
  <p>This is discribed in the style sheet as div.right.</p>
</div>
<div class="left2">
  <p>This is discribed in the style sheet as div.left2.</p>
</div>

http://jsfiddle.net/5anxsa1m/

您的代码是正确的，您只需更改Html中.right div的位置

相关问题
最新问题