0

何が起こっているのかを示すために jsfiddle で簡単な例を投げてから、私が達成したいことを説明します..

http://jsfiddle.net/4UMLq/20/

(コード html - jsfiddle 内)

<html>
<head>
</head>
<body>
    <div class="box1top">
    </div>
    <div class="box1middle">
        <p> Test </p><br />
        <p> Test </p>
    </div>
    <div class="box1bottom">
    </div>
        <div class="box1top">
    </div>
    <div class="box1middle">
        <p> Test </p><br />
        <p> Test </p>
    </div>
    <div class="box1bottom">
    </div>
</body>
</html>​

(コード css - jsfiddle 内)

.box1top {
    width: 150px;
    height:30px;
    background-color:#373737;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
}
.box1middle {
    width: 150px;    
    height:200px;
    background-color:#676767;
    margin-left:10px;
    margin-right:10px;
}
.box1bottom {
    width: 150px;
    height:10px;
    background-color:#373737;
    margin-left:10px;
    margin-right:10px;
}
.box2top {
    width: 150px;
    height:30px;
    background-color:#373737;
    margin-left:10px;
    margin-right:10px;
}
.box2middle {
    width: 150px;    
    height:200px;
    background-color:#676767;
    margin-left:10px;
    margin-right:10px;
}
.box2bottom {
    width: 150px;
    height:10px;
    background-color:#373737;
    margin-left:10px;
    margin-right:10px;
}

上記の例では、背景色はテキストを含むボックスの画像になります (3 つの画像に分割されます)。

ただし、これらをブラウザウィンドウに並べて表示するのではなく、並べて表示したい..要素を浮かせてみましたが、うまくいかないようです。

誰かアイデアはありますか？どんな助けでも大歓迎です

ありがとう、カルロス

4

2 に答える 2

2

コーディング（何でも）するときの一般的な原則は、それを乾いた状態に保つことです（自分自身を繰り返さないでください）。

ここを参照してください：http：//jsfiddle.net/4UMLq/21/

幸い、CSSを使用すると、これを簡単に実行できます。

.box{
    float:left;
    margin:10px 10px 0 10px;
    width: 150px;
}

.box-top {
    height:30px;
    background-color:#373737;
}
.box-middle {   
    height:200px;
    background-color:#676767;
}
.box-bottom {
    height:10px;
    background-color:#373737;
}

#box2{
    margin-left:0;
}

HTML：

<div id="box1" class="box">
    <div class="box-top">
    </div>
    <div class="box-middle">
        <p> Test </p>
        <p> Test </p>
    </div>
    <div class="box-bottom">
    </div>
</div>    
<div id="box2" class="box">
    <div class="box-top">
    </div>
    <div class="box-middle">
        <p> Test </p>
        <p> Test </p>
    </div>
    <div class="box-bottom">
    </div>
</div>

上、中、下のdivはそれぞれ「ボックス」div内にネストされていることに注意してください。boxNtop多くの要素が同じクラス名を共有する可能性があるため、重複するなどのCSS定義を作成する理由はありません。したがって、すべてを同じように見せたい場合は、簡単に実行できます。

于 2012-10-24T22:26:14.410 に答える
0

これを行うにはいくつかの方法がありますが、これらのボックスをフロートできる何かでラップすることから始めたいと思うでしょう: http://jsfiddle.net/wKqnh/

HTML:

<div class="box-wrap">
    <div class="box1top">
    </div>
    <div class="box1middle">
        <p> Test </p><br />
        <p> Test </p>
    </div>
    <div class="box1bottom">
    </div>
</div>

CSS:

.box-wrap {
    float: left;
}

これには別のレイアウトの影響があるため、たとえば、コンテナのサイズに応じて、ボックスの後のすべてが最後のボックスの左側に配置されます。

フロート ベースのレイアウトの基本に関する優れた記事は次のとおりです: http://www.alistapart.com/articles/css-floats-101/

于 2012-10-24T22:25:30.297 に答える