0

親がinnerContainerである2つのdivleftSideとrightSideがあります。両方のdivを左にフロートしました。それらは並んで表示されていますが、右側のdivは親divの残りのスペースをカバーしていません。

オーバーフロー：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>

問題が見つかりました。このファイルと同じID名を含む別のcssファイルがあります。これが問題の原因です。そのファイルのプロパティがここに適用されています。皆さんの助けに感謝します。

4

2 に答える 2

0

これを試して：

<style type="text/css">
#rightSide {
 width:100px;
 border:1px solid #000;
 float:left;
}
</style>
于 2012-05-11T14:16:05.277 に答える
0

overflow:hidden を使用してみましたが、幅も指定しましたが、それでも同じ幅です。

残りのスペースを埋める場合overflow: hiddenは、anyを使用しますが、指定しないでください。width#rightSide

参照: http://jsfiddle.net/thirtydot/Yuxzs/

#rightSide {
    overflow: hidden;
    border: 1px solid #000;
}​
于 2012-05-11T14:16:00.840 に答える