web-dev-qa-db-ja.com

CSS Float：テキストの左側に画像をフローティング

ポストボックスごとに、サムネイルを左に、テキストを右にフロートさせます。親指でテキストをラップしたくありません。

これが私のhtmlコードです。

<div class="post-container">                
   <div class="post-thumb"><img src="thumb.jpg" /></div>
   <div class="post-title">Post title</div>
   <div class="post-content"><p>post description description description etc etc etc</p></div>
</div>

私はいくつかの方法を試してみましたが、まだ機能しません...テキストが右側に表示されません...

これが私のCSSコードです。

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
    clear:left;
}

.post-content {
    float:right;
}
htmlcsscss-float
36
Cris

これはあなたが望んでいることですか？

  • タイトルをh3（ヘッダー）タグに変更しました。これは、divを使用するよりもセマンティックな選択だからです。

Live Demo＃1
Live Demo＃2（上部にヘッダーがあり、必要かどうかわからない）

HTML：

<div class="post-container">                
    <div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
    <div class="post-content">
        <h3 class="post-title">Post title</h3>
        <p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p>
   </div>
</div>

CSS：

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    overflow: auto
}
.post-thumb {
    float: left
}
.post-thumb img {
    display: block
}
.post-content {
    margin-left: 210px
}
.post-title {
    font-weight: bold;
    font-size: 200%
}
80
thirtydot

両方の要素を左にフロートするだけです：

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
}

.post-content {
    float: left;
}

編集：実際には、幅は必要ありません、両方を左にフロートするだけです

4
Demelziraptor

私はほとんど常にオーバーフローを使用します：これらの状況ではテキスト要素に隠されていますが、しばしば魅力のように機能します;）

.post-container {
 margin: 20px 20px 0 0;
 border:5px solid #333;
}
.post-thumb img {
 float: left;
}
.post-content {
 overflow:hidden;
}
1
Optimator

このサンプルを確認してください： http://jsfiddle.net/Epgvc/1/

タイトルを左にフローティングして、clear:both divを下に..

1
Dutchie432
.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
    width:600px;
    overflow:hidden;
}

.post-thumb img {
    float: left;
    clear:left;
    width:50px;
    height:50px;
    border:1px solid red;
}

.post-title {
     float:left;   
    margin-left:10px;
}

.post-content {
    float:right;
}
<div class="post-container">                
   <div class="post-thumb"><img src="thumb.jpg" /></div>
   <div class="post-title">Post title</div>
   <div class="post-content"><p>post description description description etc etc etc</p></div>
</div>

jsFiddle

1
dmackerman

2列のレイアウトになるように、投稿コンテンツと投稿サムの幅を設定します。

0
quarkdown27

displayを使用したソリューション：flex（応答性の高い動作）： http：// jsfiddle .net/dkulahin/w3472kct

HTML：

<div class="content">
    <img src="myimage.jpg" alt="" />
    <div class="details">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

CSS：

.content{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.content img {
    width: 150px;
}
.details {
    width: calc(100% - 150px);
}
@media only screen and (max-width: 480px) {
    .content {
        flex-direction: column;
    }
    .details {
        width: 100%;
    }
}
0
Dmitry Kulahin