Question

我有两个divs leftSide和rightSide，其父级是innerContainer。我把两个div都漂到了左边。他们并排出现，但右边的div没有覆盖父div的剩余空间。

我尝试使用overflow：hidden并且还指定了宽度但仍然具有相同的宽度。

我的Css：

  #container {
  overflow:auto;
  margin:10px auto;
}

   #innerContainer{
        margin:10px auto;   
        width:1200px;
        background:#FFFFFF;
        border:2px solid #09F;
        overflow:auto;
}

 #leftSide{
overflow:auto;
float:left;
width:700px;
border:3px solid #F00;
 }

 #topheaderProfile{
margin:5px;
border:1px solid #F00;
  }

   #middleCompanyDescription{
margin:5px;
border:1px solid #333;
  }

  #Profile{
text-align:left;
  }

 .ProfileBox{
padding:10px;
cursor:pointer;
overflow:hidden;
text-align:left;
word-break:break-all;
word-wrap:break-word;
 }

 .CompanyLogo{
float:left;
padding:5px;
 }

 .rightCover{
overflow:auto;
padding:1px;
 }

  .companyTitle{
color:#36F;
font-size:24px;
overflow:hidden;
 }

 .companyTitle a{
text-decoration:none;
 }

 .CompanyRating{
float:left;
margin-top:3px;
 }

 .Companylikedicon{
overflow:hidden;
float:right;
margin-left:10px;
 }

.Companycommenticon{
float:right;
margin-right:10px;
}



.CompanySlogan{
color:#999;
word-break:break-all;
word-wrap:break-word;
clear:both;
 }



  #rightSide{
width:100px;
border:1px solid #000;
  }

我的Html：

  <div id="container">
     <div id="innerContainer">

           <div id="leftSide"> 

        <div id="topheaderProfile">
            <div id='Profile'>
                <div class='ProfileBox'>
                    <div class='CompanyLogo'><img src='../Images/defaultPic.jpg' width='90' height='90'/></div> 
                    <div class='rightCover'>
                        <div class='companyTitle'>My Company</div>
                        <div class='CompanyRating'>
                                            Rating : <img src='../Images/FilledStar.png' width='20' height='20' id='Star1' />       
                                            <img src='../Images/EmptyStar.png' width='20' height='20' id='Star2' />
                                            <img src='../Images/EmptyStar.png' width='20' height='20' id='Star3' />
                                            <img src='../Images/EmptyStar.png' width='20' height='20' id='Star4' />
                                            <img src='../Images/EmptyStar.png' width='20' height='20' id='Star5' />
                         </div>

                         <div class='Companylikedicon'><img src='../Images/LikedIcon.png'  width='25' height='25' /> 100</div>
                         <div class='Companycommenticon' ><img src='../Images/comment.png'  width='25' height='25' /> 100</div>

                         <div class='CompanySlogan'>This is the best offer you get 2Rs. off in the besaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat underwear of the worldffer you get 2Rs. off in the besaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat underwear of the world.</div>
                   </div>

               </div>    <!--ProfileBox-->
            </div>
           </div><!--TopHeeaderProfile-->

    <div id="middleCompanyDescription">
sadasdsad
    </div>




         </div>     <!--LeftSide-->


        <div id="rightSide">
          sadasdasdasd
        </div>


     </div>


 </div>

好的我发现了问题。还有另一个css文件包含与此文件中相同的ID名称。这导致了问题。该文件的属性正在此处应用。谢谢大家的帮助。

Answer 1

我尝试使用overflow：hidden并且还指定了宽度但仍然具有相同的宽度。

如果您希望overflow: hidden填充剩余空间，请使用width但不要指定任何#rightSide。

请参阅： http://jsfiddle.net/thirtydot/Yuxzs/

#rightSide {
    overflow: hidden;
    border: 1px solid #000;
}

Answer 2

试试这个：

<style type="text/css">
#rightSide {
 width:100px;
 border:1px solid #000;
 float:left;
}
</style>

css两个div漂浮在左边。正确的div没有覆盖剩余的空间

2 个答案: