Platzieren von border-image bottom in einem div - html, css

Ich habe ein Problem mit den floated-Elementen, denen ich am Ende einer Box ein Hintergrundbild geben möchte:

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

Aber das geht wahrscheinlich so:

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

Ich habe hier die Eigenschaft border anstelle eines Bildes verwendet. DEMO

Antworten:

1 für die Antwort № 1

Hier ist die Lösung für das, was Sie erreichen möchten. Ich habe gerade deine geändert CSS und HTML. Prüfe diese Geige: 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;
}

Und das HTML ist

<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 für die Antwort № 2

Sie müssen ein hinzufügen clear zu deinem Spacer:

.spacer {clear: both;}

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


0 für die Antwort № 3

Ich habe deinen Code geändert und alle Elemente verschoben. Hier ist das Ergebnis: 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>

Es kann sein, was du willst.


0 für die Antwort № 4

Wie jeder hier vorgeschlagen hat, während ich dies geschrieben habe, müssen Sie den Abstandhalter in die div. Andernfalls weiß es nicht, wo es hingehört und welche Breite zu verwenden ist. Wenn Sie die roten Rahmen außerhalb des Abstandshalters haben möchten, fügen Sie einfach ein weiteres div für den Inhalt hinzu:

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

Speisekarte