Umiestnenie spodného okraja obrazu na rozbočovač, css

Mám problém s vznášajúcimi prvkami, na ktoré chcem dať nejaký obrázok na pozadí na konci schránky ako toto:

+--------------------+    +-------------------+     +---------------------+
|                    |    |                   |     |                     |
|                    |    |                   |     |                     |
+--------------------+    +-------------------+     +---------------------+
================           ==============            =================

To však pravdepodobne pretrváva:

===========================================================================
+--------------------+    +-------------------+     +---------------------+
|                    |    |                   |     |                     |
|                    |    |                   |     |                     |
+--------------------+    +-------------------+     +---------------------+
===========================================================================

Použil som tu vlastnosť hraníc namiesto obrázka. DEMO

odpovede:

1 pre odpoveď č. 1

Tu je riešenie toho, čo chcete dosiahnuť. Práve som upravil tvoju CSS a HTML, Zaškrtnite túto hračku: http://jsfiddle.net/sarfarazdesigner/p7mBk/5/

CSS

.cf:before, .cf:after {
display: table;
content: " ";
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
}
.mainb {
width: 1000px;
}
.fleft {
float: left;
width: 300px;
}
.fright {
float: right;
width: 300px;
}
.midcol {
margin: 0 310px;
}
.cmnbrd {
border: 1px solid red;
margin-bottom:20px;
}
.spacer {
border: 1px solid gray;
border-top: 0;
background: blue;
height: 2px;
margin: 0 12px;
}

A HTML je

<div class="mainb cf">
<div class="fleft">
<div class="cmnbrd">
<h3>Latuis Congue Estaer</h3>
<img src="/images/" alt="" />
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
<p class="alt"><a href="#">More</a></p>
</div>
<div class="spacer"></div>
</div>
<div class="fright">
<div class="cmnbrd">
<h3>Latuis Congue Estaer</h3>
<img src="/images/" />
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
<p class="alt"><a href="#">More</a></p>
</div>
<div class="spacer"></div>
</div>
<div class="midcol">
<div class="cmnbrd">
<h3>Latuis Congue Estaer</h3>
<img src="/images/" />
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
<p class="alt"><a href="#">More</a></p>
</div>
<div class="spacer"></div>
</div>
</div>

1 pre odpoveď č. 2

Musíte pridať a clear na váš oddeľovač:

.spacer {clear: both;}

http://jsfiddle.net/p7mBk/7/


0 pre odpoveď č. 3

Modifikoval som váš kód a vznášal všetky prvky. Tu je výsledok: http://jsfiddle.net/p7mBk/3/

CSS

.cf:before, .cf:after{display: table; content: " ";}
.cf:after{clear: both;}
.cf{zoom: 1;}

.mainb{width: 1000px;}
.fleft{float: left; width: 300px;}
.fright{float: left; width: 300px;}
.midcol{float: left;width:310px;}
.fleft, .fright, .midcol{border: 1px solid red;}
.spacer{border: 1px solid gray; border-top: 0; background: blue; height: 2px; margin: 0 12px;}

HTML

<div class="mainb cf">
<div class="fleft">
<h3>Latuis Congue Estaer</h3>
<img src="/images/" alt="" />
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
<p class="alt"><a href="#">More</a></p>
<div class="spacer"></div>
</div>
<div class="fright">
<h3>Latuis Congue Estaer</h3>
<img src="/images/" />
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
<p class="alt"><a href="#">More</a></p>
<div class="spacer"></div>
</div>

<div class="midcol">
<h3>Latuis Congue Estaer</h3>
<img src="/images/" />
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
<p class="alt"><a href="#">More</a></p>
<div class="spacer"></div>
</div>
</div>

Môže to byť to, čo chcete.


0 pre odpoveď č. 4

Ako tu navrhli všetci, keď som to napísal, musíte vložiť medzeru do vnútra div, V opačnom prípade nevie, kde patrí a akú šírku používa.Ak chcete mať červené okraje mimo rozdeľovača, jednoducho pridajte ďalšiu časť obsahu:

<column>
<border>
<text/>
</border>
<spacer/>
</column>

Ponuka