0

2 つの列を並べて取得しようとしています (左/右にフロート) が、どちらにも動的テキストがあります。

スクリーンショット !

コードへのリンク

<div class="news-item">
    <div class="news-pic">
        <a href="#">
            <img src="" width="126" height="80" alt="">
        </a>
    </div>
    <div class="news-description">        
        <h3><a href="#">Long post title this is. What is this? this is a long post title. Even longer. (dynamic)</a></h3>   
        <a href="#" class="category-name">Longer category name (dynamic)</a>        
        <div style="clear:both"></div>
        <small><i>Published {{ post.published|date:"j. F Y" }}</i></small>
        <p class="text-min">Blah blah body</p>
        <div style="clear:both"></div>
    </div>
    <div style="clear: both"></div>
</div>

html, body {
    font-size: 13px;
    font-family: arial;
}

.news-item {
    padding: 10px 10px 10px 10px;
    border: 1px solid #f2f2f2;
    cursor: default;
    width: 658px;
    margin: 10px 0 20px 0;
    border-radius: 5px;
}

.news-pic {
    display: inline-block;
    vertical-align: top;
    padding: 3px;
    border: 1px solid #DADADA;
    margin-right: 10px;
    background: white;
}

.news-description {
    margin-left: 0;
    display: inline-block;
    width: 510px;
}

.news-description h3 {
    margin: 0;
    float: left;
    font-size: 15px;
}

.news-description h3 a {
    text-decoration: none;    
    color: #137541;
}

.category-name {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    text-decoration: none;
    padding: 1px 4px 1px 5px;
    font-weight: bold;
    border: 1px solid #dadada;
    border-right: none;
    background: rgba(215, 214, 214, .2);
    color: #807f7f;
    white-space: nowrap;
    display: inline-block;
    font-size: 10px;    
    margin-right: -11px;
    z-index: 5;
    float: right;
}

左のメインテキストが右のカテゴリに到達したときに新しい行に「改行」しようとしています(これも動的であるため、静的な幅にすることはできません)。CSSだけでこれは可能ですか？それともJSに手を伸ばす必要がありますか？

どうもありがとう！:)

4

1 に答える 1

0

テキストがフロートされていないこと、およびボタンがHTMLのテキストの右と前の両方にフロートされていることを確認してください

http://jsfiddle.net/vR3eE/4/

于 2012-04-07T18:33:56.797 に答える