css浮动和填充[英] css float and padding

本文是小编为大家收集整理的关于css浮动和填充的处理方法,想解了css浮动和填充的问题怎么解决?css浮动和填充问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

这是HTML布局:

        <div class="wrap">
           <div id="container">
               <div id="left">...</div> 
               <div id="right">...</div> 
            </div>
        </div>

我使用float: left在左端,float: right float: right向右div.然后,我将padding-top: 10px>用于容器.为什么不起作用?谢谢.

这是我的第一个风格:

.wrap {
    float: left;
    width: 1000px
}

#container{
    background-color: #FFFFFF;
    padding: 10px 10px 0;
    width: 980px;
    float: left;
}

#left {
    float: left; 
    width: 670px;
}

#right {
    float: right;
    width: 300px;
}

示例在这里.

推荐答案

浮动元素时,它实际上将其从文档流中取出,因此向其父添加填充物不会对其产生影响.您可以在两个内部的divs上使用margin-top: 10px;.

其他推荐答案

在float左div

之前放置右浮动div

其他推荐答案

而不是使用浮点,而是使用Flex并证明内容为空间

的内容.
 #container{
  background-color: #FFFFFF;
  padding: 10px 10px 0;
  width: 980px;
  display: flex;
  justify-contents: space-between;
 }

本文地址:https://www.itbaoku.cn/post/567255.html