Vertically Richten Sie den Text und Bild in einer DIV-Box

Question

ich eine Anforderung habe ein Layout (Layout Bildlink unten)

Layout Image Link

I DIV-Boxen vertikal zusammen mit dem Platz für Bild ausgerichtet haben will erstellen und Text.

Oberer Teil Ich möchte, dass die DIV-Box das Textfeld links und das Bild links hat.

möchte ich die Seitenleiste aufgeteilt in 2. Der obere Abschnitt zu und unteren Abschnitt

Der untere Abschnitt i 2 div Boxen nebeneinander haben wollen vertikal mit dem Bild auf der linken Seite und Text auf der rechten Seite ausgerichtet Handseite

Die Höhe der DIV-Felder sollte basierend auf der Texteingabe erweitert werden. Wenn mehr Textzeilen vorhanden sind (Beispiel: im oberen Teil DIV-Feld), sollten die 2 nebeneinander liegenden DIVs nach unten gedrückt werden.

Und das Gleiche mit den 2x2 Seite an Seite Div-Boxen.

Auch soll ich in der Lage sein, die 2x2 div Boxen im unteren Teil

basierte auf meiner Forderung

Bitte helfen Sie mir erstellt in immer dieses Layout hinzuzufügen.

Answer 1

Diese Sie auf Ihrem Weg helfen (http://jsfiddle.net/h7funt7k/2/):

HTML:

<p><span style="font-size: 10pt; font-family: verdana, sans-serif">Sample Text</span> 
    </p> 
    <p><span style="font-size: 10pt; font-family: verdana, sans-serif"></span>&#160;&#160;</p> 

    <div class="sidebar" style="background-color: #f00"> 
    <center> 
     <h3 style="color: #0066CC">sidebar1 </h3> 
    </center> 
    </div> 
    <div class="sidebar" style="background-color: #f00"> 
    <center> 
     <h3 style="color: #0066CC">sidebar2 </h3> 
    </center> 
    </div> 
<div class="topbox" style="background-color: #EBEBEB"> 
    <center> 
     <h3 style="color: #0066CC">Top box</h3> 
    </center> 
    </div> 
    <div class="box" style="background-color: #EBEBEB"> 
    <center> 
     <h3 style="color: #0066CC">Service Governance</h3> 
    </center> 
    </div> 
    <div class="box" style="background-color: #EBEBEB"> 
    <center> 
     <h3 style="color: #0066CC">Change Management</h3> 
    </center> 
    </div> 
    <div class="box" style="background-color: #EBEBEB"> 
    <center> 
     <h3 style="color: #0066CC">People Board</h3> 
    </center> 
    </div> 
    <div class="box" style="background-color: #EBEBEB"> 
    <center> 
     <h3 style="color: #0066CC">Software Asset Management</h3> 
    </center> 
    </div> 
    <div class="box" style="background-color: #EBEBEB"> 
    <center> 
     <h3 style="color: #0066CC">Finance Management</h3> 
    </center> 
    </div> 
    <div class="box" style="background-color: #EBEBEB"> 
    <center> 
     <h3 style="color: #0066CC">Vendor Governance</h3> 
    </center> 
    </div> 


</body> 

</html> 

Css:

DIV.box { 
    HEIGHT: 150px; 
    WIDTH: 40%; 
    FLOAT: right; 
    MARGIN: 0px 1% 1% 0px 
} 
.topbox { 
    HEIGHT: 150px; 
    WIDTH: 81%; 
    FLOAT: right; 
    MARGIN: 0px 1% 1% 0px 

} 
.sidebar { 
    float: right; 
    display: block; 
    width: 10%; 
    height: 300px; 
    margin: 1% 0 0 0; 
} 

Answer 2

ich in der ersten Reihe nur gearbeitet habe aber der Rest sollte die gleiche Idee sein.

http://jsfiddle.net/h7funt7k/3/

CSS

.imageDiv { 
    width: 30%; 
    height: 100%; 
    float: left; 
    vertical-align: middle; 
} 

.image { 
    width: 100%; 
    height: 100%; 
} 

.text { 
    width: 70%; 
    float:left; 
} 
DIV.box { 
     BORDER-TOP: #e3f7fa 0px solid; 
     HEIGHT: 150px; 
     BORDER-RIGHT: #e3f7fa 0px solid; 
     WIDTH: 40%; 
     BORDER-BOTTOM: #e3f7fa 0px solid; 
     FLOAT: right; 
     CLEAR: none; 
     BORDER-LEFT: #e3f7fa 0px solid; 
     MARGIN: 0px 1% 1% 0px 
    } 

HTML

<p><span style="font-size: 10pt; font-family: verdana, sans-serif">Sample Text</span> 
    </p> 
    <p><span style="font-size: 10pt; font-family: verdana, sans-serif"></span>&#160;&#160;</p> 

    <div class="box" style="background-color: #EBEBEB"> 
    <div class="imageDiv"> 
     <img class="image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /> 
    </div> 
    <div class="text"> 
     <center> 
     <h3 style="color: #0066CC">Service Governance</h3> 
     </center> 
    </div>  
    </div> 
    <div class="box" style="background-color: #EBEBEB"> 
    <div class="imageDiv"> 
     <img class="image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /> 
    </div> 
    <div class="text"> 
     <center> 
     <h3 style="color: #0066CC">Change Managemen</h3> 
     </center> 
    </div> 
    </div> 
    <div class="box" style="background-color: #EBEBEB"> 
    <center> 
     <h3 style="color: #0066CC">People Board</h3> 
    </center> 
    </div> 
    <div class="box" style="background-color: #EBEBEB"> 
    <center> 
     <h3 style="color: #0066CC">Software Asset Management</h3> 
    </center> 
    </div> 
    <div class="box" style="background-color: #EBEBEB"> 
    <center> 
     <h3 style="color: #0066CC">Finance Management</h3> 
    </center> 
    </div> 
    <div class="box" style="background-color: #EBEBEB"> 
    <center> 
     <h3 style="color: #0066CC">Vendor Governance</h3> 
    </center> 
    </div> 

Answer 3

Dies könnte Sie (https://jsfiddle.net/g0cbeaga/) helfen

HTML

<div class="boxes"> 
     <div class="top-box"> 
      <img src=""/> 
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p> 
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> 
     </div> 
    </div> 
    <div class="sidebar"> 
     <div class="sidebar-top"> 
      <img src="" /> 
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p> 
     </div> 
     <div class="sidebar-bottom"> 
      <img src="" /> 
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p> 
     </div> 
    </div> 

CSS

.boxes { 
    float: left; 
    width: 580px; 
    height: 600px; 
} 
.top-box { 
    padding: 20px; 
    width: 540px; 
    height: 255px; 
    background-color: #800000; 
} 
.top-box img { 
    float: right; 
    width: 150px; 
    height: 150px; 
    background-color: #808080; 
} 
.sidebar { 
    float: right; 
    width: 200px; 
    height: 600px; 
    text-align: center; 
} 
.sidebar-top { 
    padding: 20px; 
    width: 160px; 
    height: 255px; 
    background-color: #800000; 
} 
.sidebar-bottom { 
    margin-top: 10px; 
    padding: 20px; 
    width: 160px; 
    height: 255px; 
    background-color: #800000; 
} 
.sidebar-top img , .sidebar-bottom img { 
    width: 150px; 
    height: 150px; 
    background-color: #808080; 
}