0

我正在尝试将元素周围浮动文本的“传统”浮动用法与不同分辨率的一些适应性混合。小提琴：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不能移动到高于 end 的位置.text，因为.text处于正常流程中。我尝试在浮动上使用相对定位，但我不知道偏移它的高度，所以 -100% 不起作用。

常用的方法是使用floaton .text，但它会干扰文字浮动.cover。我还尝试将相关内容移到文本上方，但是在较小的窗口中它位于文本之前，这是不可取的。此外，任何干扰overflow或display属性.text使文本块跳离浮动.cover。

我能得到的最接近的是使用position: absoluteon .relatedwith right:0px;top:0px。这给出了我想要的定位，但产生了一个CSS 无法解决的问题：相关内容将低于article.

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

这是我想要实现的目标： 目标

4

3 回答 3

0

这是一个如何更改 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
}
于 2013-09-09T01:01:42.187 回答
0 
<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>
于 2013-08-25T09:11:06.320 回答
0

干得好：

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

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

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，则可以使页面真正响应。

于 2013-08-26T02:10:02.077 回答