40

抱歉，伙计们提出了一个非常简单的问题，但我试图以预定义的宽度沿这些线向左浮动一个 div 和向右浮动一个 div

<div style="width: 100%;">
    <div style="float:left; width: 80%">
    </div>
    <div style="float:right;">
    </div>
</div>

虽然这“大部分”有效，但它似乎把下面页面上的其他元素弄乱了。

那么，为什么要使用 CSS 将 HTML 页面垂直分成两部分而不影响页面上的其他元素，正确的做法是什么？

4

7 回答 7

47

您可以使用..

<div style="width: 100%;">
   <div style="float:left; width: 80%">
   </div>
   <div style="float:right;">
   </div>
</div>
<div style="clear:both"></div>

现在这个下面的元素不会受到影响。

于 2012-07-26T04:55:42.190 回答
14

只需添加溢出：自动；到父 div

<div style="width: 100%;overflow:auto;">
    <div style="float:left; width: 80%">
    </div>
    <div style="float:right;">
    </div>
</div>

工作演示

于 2012-07-26T04:55:15.997 回答
8

我猜你页面上的元素搞砸了，因为你没有清除你的浮动，检查一下

演示

HTML

<div class="wrap">
    <div class="floatleft"></div>
    <div class="floatright"></div>
    <div style="clear: both;"></div>
</div>

CSS

.wrap {
    width: 100%;
}

.floatleft {
    float:left; 
    width: 80%;
    background-color: #ff0000;
    height: 400px;
}

.floatright {
float: right;
    background-color: #00ff00;
    height: 400px;
    width: 20%;
}
于 2012-07-26T04:57:34.343 回答
3

也可以通过两者float来解决left。

试试这个：

工作演示

PS这只是Ankit的答案的改进

于 2012-12-21T17:39:15.010 回答
3

看看这个小提琴：

http://jsfiddle.net/G6N5T/1574/

CSS/HTML 代码：

.wrap {
    width: 100%;
    overflow:auto;
}

.fleft {
    float:left; 
    width: 33%;
background:lightblue;
    height: 400px;
}

.fcenter{
    float:left;
    width: 33%;
    background:lightgreen;
    height:400px;
    margin-left:0.25%;
}

.fright {
float: right;
    background:pink;
    height: 400px;
    width: 33.5%;
    
}
<div class="wrap">
    <!--Updated on 10/8/2016; fixed center alignment percentage-->
    <div class="fleft">Left</div>
    <div class="fcenter">Center</div>
    <div class="fright">Right</div>
</div>

这将 CSS属性用于页面上 s 的float左对齐、右对齐和居中对齐。div

于 2015-08-19T17:11:25.330 回答
0

或者，您还可以使用称为linear-gradient()函数的特殊函数将浏览器屏幕分成相等的两半。查看以下代码片段：

body
{
  background-image:linear-gradient(90deg, lightblue 50%, skyblue 50%);
}

这里，linear-gradient()函数接受三个参数

  1. 90deg用于屏幕的垂直分割。（同样，您可以180deg用于屏幕的水平分割）
  2. lightblue颜色用于表示屏幕的左半部分。
  3. skyblue颜色已用于表示分屏的右半部分。在这里，50%一直用于对浏览器屏幕进行等分。如果您不想等分屏幕，您可以使用任何其他值。希望这可以帮助。:) 快乐编码！
于 2019-01-01T07:48:39.783 回答
0

这是弹性盒方法：

CSS

 .parent {
  display:flex;
  height:100vh;
  }
  .child{
    flex-grow:1;
  }
  .left{
    background:#ddd;
  }
  .center{
    background:#666;
  }

  .right{
    background:#999;
  }

HTML

<div class="parent">
    <div class="child left">Left</div>
    <div class="child center">Center</div>
    <div class="child right">Right</div>
</div>

您可以在js fiddle中尝试相同的操作。

于 2020-02-11T09:24:56.020 回答