0

整列させたいコンテナがいくつかあります。これは私がこれまでに持っているコードです: jsfiddle

まず、マシンからこのコードを実行すると、「day-label」は jsfiddle に表示されるサイズの 2 倍になります。次の 2 つ ("max-points" と "close-points") は互いに積み重なっており、"day-label" に適切なテキストです。これは私が望むとおりです。

次の 3 つのコンテナーを並べることができないようです。「ポイント合計」コンテナーは「日ラベル」のようにしたいのですが、最大点と終点の右側にあります。次に、次の 2 つの「30 ポイント」と「50 ポイント」が必要です。

それらはすべて同じ線上にあるはずですが、すべて同じ形ではありません。

私が話していることを誰か知っていますか、それとも状況を混乱させていますか?

「top:X」と「left:X」を使用できると思いますが、それらすべてを互いにインライン化する簡単な方法があるかどうか知りたいですか? 最初の 3 つのコンテナーのように。

助けてくれてありがとう。

これは私がどのように見せたいかのモックアップです -

ここに画像の説明を入力

4

4 に答える 4

0

これを使用してください：フィドル

.day-point-container
{
    width: 100%;
    background-color: pink;
}

.result-headers
{
    background-color: green;

}

.day-label
{
    background-color: lime;
    width: 10%;
    height: 10%;
    text-align: center;
    float: left;
}

.max-points
{
    background-color: blue;
    width: 50%;
    height: 5%;
}

.close-points
{
    background-color: purple;
    width: 50%;
    height: 5%;
}

.points-totals
{
    background-color: orange;
    width: 20%;
    height:10%;
    float: left;
}

.thirty-points
{
    background-color: red;
    width: 10%;
    float: left;
}

.fifty-points
{
    background-color: gold;
        width: 10%;
        float: left;
        display:inline;
        float: left;
    }

.clearfix {
    clear: both;
    }

<div class="day-point-container">                
    <div class="result-headers">Title</div>
    <div class="day-label"><h1>1<small>st</small></h1></div>
    <div class="max-points">Max</div>
    <div class="close-points">Close</div>
    <div class="points-totals">Total</div>
    <div class="thirty-points">30 points</div>
    <div class="fifty-points">50</div>
    <div class="clearfix"></div>
</div>
于 2012-07-19T15:51:11.053 に答える
0

このjsFiddleの例はどうですか?

HTML

<div class="day-point-container">                
    <div class="result-headers">Title</div>
    <div class="day-label"><h1>1<small>st</small></h1></div>
    <div class="max-points">Max</div>
    <div class="close-points">Close</div>
    <div class="points-totals">Total</div>
    <div class="thirty-points">30 points</div>
    <div class="fifty-points">50</div>
</div>​

CSS

.day-point-container
{
    width: 100%;
    background-color: pink;
}

.result-headers
{
    background-color: green;
}

.day-label
{
    background-color: lime;
    width: 10%;
    height: 10%;
    text-align: center;
    float: left;
}

.max-points
{
    background-color: blue;
    width: 50%;
    height: 5%;
}

.close-points
{
    background-color: purple;
    width: 50%;
    height: 5%;
}

.points-totals
{
    background-color: orange;
    width: 20%;
    height:10%;
    float:right;
}

.thirty-points
{
    background-color: red;
    width: 10%;
    float:right;
}

.fifty-points
{
    background-color: gold;
    width: 10%;
    clear:right;
    float:right;
}​
于 2012-07-19T15:52:26.070 に答える
0

あなたが達成しようとしていることは 100%わかりませんがfloat、CSS で関数を使用してみてください。たとえば、 http:float:left //www.w3schools.com/cssref/pr_class_float.asp の W3schools ページへのリンクです。それらを中央に配置したいだけで、いつでも試すことができますfloat <center>

于 2012-07-19T15:55:09.220 に答える