1

CSSを使用して特定のレイアウトで画像を表示する方法を実現しようとしています。CSSを使用してこれを行う方法がわかりません。

2つの小さな画像を重ねて配置し、右側に1つの高い画像を小さな画像の横に配置します。高い画像の高さは、小さな写真と同じです。

必要なレイアウト：

┌─────────────┬────────────┐
│ SMALL IMAGE │            │
├─────────────| TALL IMAGE |
│ SMALL IMAGE │            │
└─────────────┴────────────┘

私のコードはここのjsfiddleにあります：http：//jsfiddle.net/VjfGS/

4

4 に答える 4

1

最小限のマークアップ変更で目的の出力を実現するには：http：//jsfiddle.net/pratik136/AzyQG

HTML：

<div class ="image-section">
    <img class="tall" src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="60px" height="180px">
    <img src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="120px" height="90px"> 
    <img src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="120px" height="90px">
</div>
<div class ="image-section"></div>

CSS：

.tall {
    float: right;
}
img {
    float: left;
}
.image-section{
    width: 180px;
}​

出力

于 2012-08-03T13:33:32.050 に答える
1

あなたはこのようなものでそれを行うことができます：

デモ： http： //jsfiddle.net/5kxNm/

CSS：

.tall {
    float: none;
}
img {
    float: left;
    clear: left;
}​

警告：これは「クイックアンドダーティ」修正であり、すべての状況で機能するとは限りません。

于 2012-08-03T13:20:21.283 に答える
0

たとえば、このようにhttp://jsfiddle.net/VjfGS/4/

<div class ="image-section">
    <div class="left">
        <img> 
        <img>
    </div>
    <img class="tall">
</div>
<div class ="image-section"></div>
​.tall {
    float:left;
}
.left{
    float: left;
}
.left img{
    display:block;
}
于 2012-08-03T13:19:36.513 に答える
0

これでやる

http://jsfiddle.net/VjfGS/18/

<div class ="image-section">
    <div class="smallDiv">    
         <img src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="120px" height="90px"> <br/>
          <img src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="120px" height="90px">
    </div>
    <img class="tall" src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="60px" height="180px">
</div>
<div class ="image-section"></div>

.smallDiv{
    float:left;
}

</ p>

于 2012-08-03T13:20:23.323 に答える