0

質問があります。すべての要素を 1 行に揃えました。

実際には、このように見えるはずです。ここに画像の説明を入力

テーブルを作成し、各 ProgressBar をテーブル セル内の Div ELements として追加することで、これを作成しました。何らかの理由で、これは IE 7 では機能しません。

だから、テーブルなしで Div 要素だけを使って html を作成したかったのです。次のようになります。

ここに画像の説明を入力

私が欠けているものを教えてください。

CSSコードは次のとおりです。

div.coverage-container {
  border: 1px solid rgba(0, 0, 0, 0.13);
  width:370px;
   height:30px;   
}  

div.progressbar-content{
width: 95px;    
text-align: center;
float:left; 
border: 1px solid rgba(0, 0, 0, 0.13);
 }


div.progressbar-maindiv {
background-color: #DAE2E3;
border-radius: 13px 13px 13px 13px;    
margin: 3px -9px 3px 114px;
padding: 3px;
width: 75px;
float:left;
 }


.progressbar-percentage {
background-color: #F23F54;
border-radius: 15px 15px 15px 15px;
height: 15px;
width: 80.00%;
 }

 .progressbar-chart-icon {       margin-right: 5px; float:right;       text-align: center;     }

HTMLコードは次のとおりです。

 <div class="coverage-container">   
<div class="progressbar-content">
    <div class="progressbar-maindiv">
        <div class="progressbar-percentage">
            <center>80%</center>
        </div>

    </div>
    <img width="21" height="21" title="Get Trends"  src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />            
</div>

<div class="progressbar-content">
    <div class="progressbar-maindiv">
        <div class="progressbar-percentage">
            <center>80%</center>
        </div>
    </div>
    <img width="21" height="21" title="Get Trends"  src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon">
</div>

<div class="progressbar-content">
    <div class="progressbar-maindiv">
        <div class="progressbar-percentage">
            <center>80%</center>
        </div>
    </div>
    <img width="21" height="21" title="Get Trends"  src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon">
</div>

</div>
4

2 に答える 2

3

これでうまくいくはずです。

http://jsfiddle.net/5Q9Cv/

私が最初に行ったのは、すべてのアイテムをフロートさせ、プログレス バーの前に来るように HTML 内のアイコンの位置を並べ替えたことです。プログレスバー自体のマージンスペースをすべて0にしました。また、「ブロック」の高さをコンテナーの高さに設定し、ブロックの周囲の境界線を右境界線だけに変更しました。このようにして、どこにも二重の境界線はありません。

必要に応じて幅を少しいじる必要があります...幅を小さくしすぎないように注意してください。そうしないと、幅が壊れてプログレスバーが次の行に落ちます。（基本的に計算してください）

HTML:

<div class="coverage-container">   

<div class="progressbar-content">

    <img width="21" height="21" title="Get Trends"  src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />    
    <div class="progressbar-maindiv">
        <div class="progressbar-percentage">
            <center>80%</center>
        </div>
    </div>

</div><!-- END BLOCK -->

<div class="progressbar-content">

    <img width="21" height="21" title="Get Trends"  src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />    
    <div class="progressbar-maindiv">
        <div class="progressbar-percentage">
            <center>80%</center>
        </div>
    </div>

</div><!-- END BLOCK -->

<div class="progressbar-content">

    <img width="21" height="21" title="Get Trends"  src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />    
    <div class="progressbar-maindiv">
        <div class="progressbar-percentage">
            <center>80%</center>
        </div>
    </div>

</div><!-- END BLOCK -->


</div>

CSS:

div.coverage-container {
    border: 1px solid rgba(0, 0, 0, 0.13);
    width:370px;
    height:30px;   
    overflow: visible;
    clear: both;
}  

div.progressbar-content {
    width: 120px;
    height: 30px;
    text-align: center;
    float:left;
    border-right: 1px solid rgba(0, 0, 0, 0.13);
}


div.progressbar-maindiv {
    background-color: #DAE2E3;
    border-radius: 13px 13px 13px 13px;    
    margin: 0;
    padding: 3px;
    width: 75px;
    float:left;
}


.progressbar-percentage {
    background-color: #F23F54;
    border-radius: 15px 15px 15px 15px;
    height: 15px;
    width: 80.00%;
}

.progressbar-chart-icon {
    margin-right: 5px;
    float: left;
    text-align: center;
}
于 2013-06-21T20:02:59.007 に答える