0

div次のように見えるように、画像とテキストを a 内に配置しようとしています

画像テキスト

ただし、そのように配置すると、背景色が表示されdivなくなります。

誰かが私が間違っていることを提案できますか?

HTML:

<div class="introduction">
    <div class="image">
        <img src="">
    </div>
    <div class="text">
        <p>Text</p>
        <p>Good luck!!</p>
    </div>
</div>

CSS:

.introduction {
    margin: 0 50px;
    padding: 20px;
    background-color: #FFFFFF;
    color: #000000;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.image {
    width: 30%;
    float: left;
}
.text {
    width: 70%;
    float: left;
}
4

3 に答える 3

1

そこに 2 つのフロートを並べて配置すると、親コンテナーの高さが実質的に 0 になります。style="clear:both;" を使用して div を配置できます。親の終了タグの前に置くと、背景が元に戻ります。

<div class="introduction">
<div class="image">
    <img src="" />
</div>
<div class="text">
    <p>
    Text
    </p>
    <p>Good luck!!</p>
</div><div style="clear:both;"></div></div>
于 2013-07-24T14:04:04.967 に答える
0

2つの解決策をお勧めします：

1)出力を次のようにしたい場合:

IMAGE TEXT 
IMAGE TEXT
      TEXT

HTML:

<div class="whole">
    <img class="ib" src="myimg.png" alt="my img" />
    <p class="ib">my text my text my text my text my text my text my text is so short I will die alone</p>
</div>

CSS: 

.ib{ display:inline-block;}
.whole{ vertical-align:top}

.ib img{width:30%; border:0;}
.ib p{width:70%;margin:0;padding:0;}

2)またはこのように:

IMAGE TEXT TEXT
TEXT TEXT

HTML:

<img src="myimg.png" alt="my img" class="leftimg" />
<p>my text my text my text is so short I will die alone</p>

CSS:

.leftimg {
   float:left; 
   margin-right:5px;
}

デモ: http://jsfiddle.net/goodfriend/b66J8/37/

于 2013-07-24T14:18:17.790 に答える
0

このようなものは、あなたが望むものを達成するかもしれません:

<style>
    .introduction{
        margin:0px;
        padding:5px;
        background-color:orange;
    }

    .introduction img{
        float:left;
        padding:10px;
    }

    .introduction p{
        padding-left:50px;
        background-color:blue;
    }
</style>

<div class="introduction">
    <img src="img/can_25.png" />
    <p>Text</p>
    <p>Good Luck</p>
</div>

p はフローティングされていないため、画像のサイズに応じて div を開いたままにします。

于 2013-07-24T14:08:46.070 に答える