Question

我正在尝试将“传统”浮动用法与元素周围的浮动文本混合，以及针对不同分辨率的某些adataptiveness。小提琴：http://jsfiddle.net/jDTBs/5/

<article>
    <header>
        <div class="cover">...image...</div>        
        <h1>title</h1>
    </header>
    <div class="row">
        <div class="text">some long text</div>
        <section class="related">related content</section>
    </div>
</article>

这里的响应性来自于在文本下方移动相关内容的风格。目前.related无法移动高于.text的结尾，因为.text处于正常流程中。我尝试在float上使用相对定位，但我不知道偏移它的高度，所以-100％不起作用。

常用方法是在float上使用.text，但它会干扰.cover周围的文字。我也尝试在文本上面移动相关内容，但是在较小的窗口中它会出现在文本之前，这是不可取的。此外，overflow中对display或.text属性的任何干扰都会使文本块跳离浮动.cover。

我最接近的是使用position: absolute .related和right:0px;top:0px。这给出了我想要的定位，但产生CSS-unsolvable problem：相关内容将低于article的结尾。

所以我被困住了。有没有办法混合这两种方法？最高的CSS支持和布局的任何更改都是可以接受的。 Bootstrap CSS也可用，但是没有多大帮助。

我想要实现的目标是： Goal

Answer 1

<article>
    <header>
        <div class="cover">...image...</div>        
        <h1>title</h1>
    </header>
    <div style="clear:both"></div>
    <div class="row">
        <div style="float:left" class="text">some long text</div>
        <section class="related">related content</section>
    </div>
    <div style="clear:both"></div>
</article>

Answer 2

你走了：

http://jsfiddle.net/jjordanca/jDTBs/8/

请注意，这在Chrome上看起来不错，但在Firefox中不行，因为img元素在CSS中需要display: block;。可能需要进行一些小的其他调整。

HTML：

<article>
    <header>
        <div class="cover">
            <img src="" alt="" />
            <time datetime="2013-08">Aug 2013</time>
        </div>
         <h1>Wo bewirtung zerfasert so kraftiger handwerke ri la kindliche</h1>
    </header>
    <div class="row">
        <div class="text">
            <p>Was mehrere fur niemals wie zum einfand wachter. Wu gewohnt langsam zu nustern dankbar. Messer all erzahl las zopfen darauf. Oden sie denn froh ohne dus. Schlafer hin ansprach geworden gelernte lauschte zugvogel mir das. Ist hochmut gebogen wendete das zweimal. Hoffnungen augenblick vertreiben es da wo zueinander kindlichen. Weg uns sohn hoch bei flu eins.</p>
            <p>Ei ku jawohl en mi fertig hangen konnen gesagt. Dazwischen nachmittag ein eigentlich ist sog tat. Was dazwischen launischen das vorsichtig verrichtet eigentlich wie ein. Wahres gerber gro ehe tal kannst. Naturlich in da nachgehen schwachem gegriffen ja. Gearbeitet bugeleisen birkendose neidgefuhl die das dienstmagd.</p>
        </div>
        <section class="related">
            <figure>
                <img src="" alt="" />
                <figcaption>Empor hosen ich nur funfe szene seine. Wo ri so stuckchen kammertur pa bekummert schranken hemdarmel.</figcaption>
            </figure>
        </section>
    </div>
</article>

CSS：

article {
    position: relative;
    max-width: 480px;
}
figure {
    margin: 0em
}
img {
    border: 1px solid
}
.cover {
    width: 80px;
    text-align: center;
    font-size: 0.8em;
}
.cover {
    display: inline-block;
    margin: 0em 2em 1em 0em;
}
time {
    display: inline-block;
    width: 80px;
    text-align: center;
}
header {
    display: inline-block;
    width: 100px;
    float: left;
}
h1 {
    position: relative;
    width: 550px;
    margin-top: -180px;
    top: 50px;
    margin-left: 90px;
    padding-left: 10px;
    font-size: 1.6em;
}
.cover img {
    width: 80px;
    height: 120px;
}
.row {
    display: inline;
    position: relative;
    top: 110px;
}
.text {
    display: inline;
    position: relative;
    font-size: smaller;
}
.related {
    width: 200px;
    font-size: 0.8em;
    height: 100px;
    float: right;
    position: relative;
    left: 220px;
    top: -200px;
}
.related img {
    width: 200px;
    height: 100px;
}
* {
    border: 1px dotted #ccc
}

HTML结构的方式问题在于这种设计在响应性方面非常有限。如果您能够更改HTML，则可以使页面真正响应。

Answer 3

以下是如何更改HTML和CSS以产生响应灵敏的布局的示例。我在HTML中添加了更多段落，以便很容易看出文本量不会影响图像位置。也许这里最大的警告是figcaption与figure相比真的很奇怪（我猜这与标准对这些元素的默认样式表的定义有关），所以除非这个可能在未来发生变化，您需要在图下方指定足够的边距以包含标题。

http://jsfiddle.net/jjordanca/jDTBs/10/

HTML：

<article>
    <figure class="cover">
        <img src="" alt="" />
        <time datetime="2013-08">Aug 2013</time>
    </figure>
    <header>
         <h1>Wo bewirtung zerfasert so kraftiger handwerke ri la kindliche</h1>
    </header>
    <div class="row">
        <figure class="related">
            <img src="" alt="" />
            <figcaption>Empor hosen ich nur funfe szene seine. Wo ri so stuckchen kammertur pa bekummert schranken hemdarmel.</figcaption>
        </figure>        
        <div class="text">
            <p>Was mehrere fur niemals wie zum einfand wachter. Wu gewohnt langsam zu nustern dankbar. Messer all erzahl las zopfen darauf. Oden sie denn froh ohne dus. Schlafer hin ansprach geworden gelernte lauschte zugvogel mir das. Ist hochmut gebogen wendete das zweimal. Hoffnungen augenblick vertreiben es da wo zueinander kindlichen. Weg uns sohn hoch bei flu eins.</p>
            <p>Ei ku jawohl en mi fertig hangen konnen gesagt. Dazwischen nachmittag ein eigentlich ist sog tat. Was dazwischen launischen das vorsichtig verrichtet eigentlich wie ein. Wahres gerber gro ehe tal kannst. Naturlich in da nachgehen schwachem gegriffen ja. Gearbeitet bugeleisen birkendose neidgefuhl die das dienstmagd.</p>
            <p>Was mehrere fur niemals wie zum einfand wachter. Wu gewohnt langsam zu nustern dankbar. Messer all erzahl las zopfen darauf. Oden sie denn froh ohne dus. Schlafer hin ansprach geworden gelernte lauschte zugvogel mir das. Ist hochmut gebogen wendete das zweimal. Hoffnungen augenblick vertreiben es da wo zueinander kindlichen. Weg uns sohn hoch bei flu eins.</p>
            <p>Ei ku jawohl en mi fertig hangen konnen gesagt. Dazwischen nachmittag ein eigentlich ist sog tat. Was dazwischen launischen das vorsichtig verrichtet eigentlich wie ein. Wahres gerber gro ehe tal kannst. Naturlich in da nachgehen schwachem gegriffen ja. Gearbeitet bugeleisen birkendose neidgefuhl die das dienstmagd.</p>
        </div>
    </div>
</article>

CSS：

* {padding: 0; margin: 0;}
article {
    position: relative;
}
img {
    border: 1px solid black;
}
.cover {
    width: 80px;
    text-align: center;
    font-size: 0.8em;
    display: inline-block;
    float: left;
    margin: 0 20px 10px 0;
}
time {
    display: inline-block;
    width: 80px;
    text-align: center;
}
header {
    margin: 20px 0 0 0;
}
h1 {
    position: relative;
    padding-left: 10px;
    font-size: 1.6em;
}
.cover img {
    width: 80px;
    height: 120px;
}
.row {
    display: inline;
    position: relative;
}
.text {
    display: inline;
    position: relative;
    font-size: smaller;
}
.related {
    display: inline-block;
    width: 200px;
    font-size: 0.8em;
    height: 100px;
    float: right;
    margin: 25px 0 50px 20px;
}
.figcaption {
    display: inline-block;
    float: right;
}
.related img {
    width: 200px;
    height: 100px;
}
* {
    border: 1px dotted #ccc
}

响应漂浮物与经典浮子混乱

3 个答案: