当div增长超过一定高度时，文本溢出

时间：2014-12-10 03:07:55

标签： html flow

我有以下div结构。

<!DOCTYPE html>
<html>
<head>
    <title>Immigration Reform</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">    
</head>

<body>

<link rel="stylesheet" type="Text/css" href="css/test.css" media="screen" />

<div class ="HeaderWrap">
    <div class ="Header">
        <div Class="HeaderLogo"></div>
    </div>
</div>  

<div class ="BodyWrap">
    <div class="Body clearfix"> 
        <div class ="BodyLeft">
            <div class ="HeadingBar1"><h7>You Have Questions?</h7></div>
            <div class="list1">
                <div class="HeadingBar2"><h7>We Provide Answers!</h7></div>
                <div class="List2"></div>
            </div>
        </div>

        <div class ="BodyRight">
            <div class ="BodyRightText1"></div>
            <div class ="BodyRightText2"></div>
            <div class ="BodyRightText3"></div>
        </div>  
    </div>  

</div>

<div class ="FooterWrap">
    <div class ="Footer">
        <div class="FooterPicture"></div>
        <div class ="Footer1"></div>
        <div class ="Footer2"></div>
        <div class ="Fotter3"></div>
        <div class ="Footer4"></div>
    </div>
</div>

</body>
</html

我的问题在于BodyLeft div，它包含其他几个嵌套的div。结构似乎正常工作，直到Bodyleft div达到一定的大小并强制list2文本传递div而不是向下推脚。这是一个发生了什么的例子。

https://www.dropbox.com/s/ukfq84b95unhytd/sampletext.PNG?dl=0

CSS代码

 body{
    margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;
    padding: 0;
    #color: black; font-size: 10pt; font-family: "Trebuchet MS", sans-serif;
    #background-color: red;
    #overflow: hidden;
    }


.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* ie 6/7 */
}

.dropcap {
font-size: 300%;
float: left;   
line-height: 0.8em;
padding: 0 2px 0 0;       
color:#690A22;         
font-family: 'Helvetica Neue';    
font-weight: bold;
position: relative;
left: -3px;
}

.HeaderWrap,
.BodyWrap,
.FooterWrap{float:left; width:100%; border:1px solid yellow; clear:both;}

.Header,
.HeaderBottom,
.Body,
.Footer{width:960px; border: 1px solid red; margin:0 auto; clear:both;}

.Header{height:227px; background:url("../Images/man-with-flag-1.png") no-repeat;#box-shadow: 0 0 20px 0 black; z-index:-1
        -webkit-box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);
        box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);clear:both;}
.HeaderLogo{float:left; height:100px; width:150px; box-shadow: 10px 10px 5px #000000; background:url("../Images/visa.png") no-repeat; position:relative; right:-45px; bottom:-165px; border:5px solid white; z-index:999;clear:both;}


.Body {position: relative; min-height: 550px;
        -webkit-box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);
        box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75); clear:both;}

.BodyLeft{float:left; min-height: 950px; #border:1px solid yellow; position: relative; #top: -90px; z-index:-1;background:#b1b6bc; box-shadow: 0 0 15px 0  black; width:26%; clear:both;}
.HeadingBar1{float:left; line-height:50px; width:250px;text-indent: 10px; font-weight: bold; position:relative; top:100px; vertical-align:middle; #border:1px solid yellow;
            background: #265884; /* Old browsers */
            background: -moz-linear-gradient(left,  #265884 0%, #000000 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,#265884), color-stop(100%,#000000)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(left,  #265884 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(left,  #265884 0%,#000000 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(left,  #265884 0%,#000000 100%); /* IE10+ */
            background: linear-gradient(to right,  #265884 0%,#000000 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#265884', endColorstr='#000000',GradientType=1 ); /* IE6-9 */}
.list1{clear:both; position:relative; top:110px; color:#690A22; #border:1px solid yellow;}

.HeadingBar2{float:left; line-height:50px; width:250px;text-indent: 10px; font-weight: bold; position:relative; vertical-align:middle; #top:250px; #border:1px solid yellow;
            background: #265884; /* Old browsers */
            background: -moz-linear-gradient(left,  #265884 0%, #000000 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,#265884), color-stop(100%,#000000)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(left,  #265884 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(left,  #265884 0%,#000000 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(left,  #265884 0%,#000000 100%); /* IE10+ */
            background: linear-gradient(to right,  #265884 0%,#000000 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#265884', endColorstr='#000000',GradientType=1 ); /* IE6-9 */}

.List2 {clear: both; position:relative; top:20px; #border:1px solid yellow; margin:20px; text-align: center}            
.BodyRight{float:right; min-height: 700px; #background:yellow; position: relative; #top: -150px; z-index:-1; #border:1px solid green; width:73%}


.LeftText{float:left; width:248px; border:1px solid white; position:relative; top:55px}
.BodyRightText1{float:left; #border:2px solid green; position: relative; width:98%; min-height: 690px; margin: 0 5px 0 5px;text-align:justify; z-index:-1}

.Footer{position:relative; z-index:-1; height:70px; background:#1c2f3d;background:url("../Images/footer2.png") no-repeat;
        -webkit-box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);
        box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);}

#.FooterPicture {float:left;box-shadow: 10px 10px 5px #000000; height:50px; width:248px; #border:5px solid white; background:url("../Images/.png") no-repeat;position:relative; #right:-5px; top:50px; z-index:-1}

h1 { font-size:14pt; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#690A22; }
h2 { font-size:12pt; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#690A22; }
h3 { font-size:10pt; font-weight: normal; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color:black; }
h7 { font-size:18pt; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#ffffff;}

以下是http://jsfiddle.net/ylafont/b634rL8v/1/

中的代码

任何建议？

2 个答案:

答案 0 :(得分：0)

您正在使用top使用relative和HeadingBar1来偏移list1元素的位置。相反，您应该使用margin-top，这将适应偏移量。或者，将padding-bottom添加到list1的末尾，其幅度与您正在使用的top偏移相同。

更改了css 

.HeadingBar1{
    float:left; 
    line-height:50px; 
    width:250px;
    text-indent: 10px; 
    font-weight: bold; 
    position:relative; 
    margin-top:100px;  /* CHANGED FROM TOP */
    vertical-align:middle; 
    #border:1px solid yellow;
    background: #265884; /* Old browsers */
    background: -moz-linear-gradient(left,  #265884 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#265884), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #265884 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #265884 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #265884 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(to right,  #265884 0%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#265884', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
.list1{
    clear:both; 
    position:relative; 
    margin-top:110px; /* CHANGED FROM TOP */
    color:#690A22; 
    #border:1px solid yellow;
}

PS。在你的某些属性之前你对#做了什么？这是无效的css，如果那就是你正在尝试的东西（不应该使用/**/）

<强> updated FIDDLE

答案 1 :(得分：0)

从.list1和.list2中删除position:relative; ...这应该可以修复页脚！

此外，您还缺少.list2中列表项<ul></ul>周围的起始无序列表标记<li></li>。

您还应该用CSS结束CSS中的所有规则; （即使是最后一个）。可能值得通过css验证器运行你的CSS。

相关问题
最新问题