2

ここに画像の説明を入力

2 番目の写真とその右側のテキストの間に大きなギャップがある理由がわかりません。コードにフィドルを添付しました。このギャップを埋めるにはどうすればよいですか？

http://jsfiddle.net/7Qchr/

.main {
    -webkit-column-gap: 1em;
    -webkit-column-rule: 2px;
    -webkit-columns: 2;

}

#image {
    max-width: 100%;
}

<div class="main">
    <p id="text_l">
       &ldquo; The best selection of cheese I've ever seen! Cannot wait for our     next order!&rdquo;
    <p>
    <img src="img/cheese1.jpg" alt="Picture of cheese" id="image">
</div>

<div class="main">
    <img src="img/cheese2.jpg" alt="Picture of cheese" id="image">
    <p id="text_r">
       &ldquo; Wow,amazing cheese selection and fast delivery! I highly  recommed you try!&rdquo;
    <p>
</div>
4

2 に答える 2

1

コードを少し書き直す必要があります...次のようなことを試してください：

HTML

<div class="main">
    <div>
        <p id="text_l">blah</p>
    </div>
    <div>
        <img src="cheese1.jpg" class="image">
    </div>
</div>
<div class="main">
    <div>
        <img src="cheese2.jpg" class="image odd">
    </div>
    <div>
        <p id="text_r">blah</p>        
    </div>
</div>

CSS

.main div{
    width: 48%;
    display: inline-block;
    vertical-align: top;
}
.image {
    max-width: 100%;
    padding: 0 10px;
}
.image.odd {float: right;}

http://jsfiddle.net/7Qchr/6/

于 2013-09-08T14:48:04.223 に答える