HTML/CSS- wie 4 Spalten des Textes

-2

Ich habe versucht, eine 4 Spalte von Bildern und Text unter jedem Bild und alle 4 Spalten in 1 Zeile zu machen. Dies ist, was ich bisher habe:HTML/CSS- wie 4 Spalten des Textes

* { 
 
    width: 80%; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    margin: auto; 
 
    max-width: 900px; 
 
} 
 
body li { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 
.main-body li { 
 
    text-decoration: none; 
 
} 
 
.main-body { 
 
    padding-top: 80px; 
 
    padding-bottom: 70px; 
 
    border-bottom: 2px solid #dfe2e6; 
 
} 
 
.livingroom-laundy, 
 
.kithen-bathroom { 
 
    width: 46.5%; 
 
} 
 
.kithen-bathroom { 
 
    float: left; 
 
} 
 
.livingroom-laundy { 
 
    float: right; 
 
} 
 
.main-body, 
 
img, 
 
p { 
 
    width: 200px; 
 
    height: 200px; 
 
}

<html> 
 

 
<head> 
 
    <title>Cabinets INC.</title> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
 
    <script src="apps.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="header"> 
 
    <h1>House.</h1> 
 
    <ul> 
 
     <li><a href="index.html">Home</a> 
 
     </li> 
 
     <li><a href="about.html">About</a> 
 
     </li> 
 
     <li><a href="portfolio.html">Portfolio</a> 
 
     </li> 
 
     <li><a href="contact.html">Contact</a> 
 
     </li> 
 
     <li><a href="order.html">Order</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="main-body"> 
 
    <ul> 
 
     <div class="kithen-bathroom"> 
 
     <li class="kitchen"> 
 
      <img src="img/kitchen1.jpg"> 
 
      <p>Looking quality American made craftsmanship? We use only the best materials and cabinet components in our RTA cabinets. Purebond plywood cabinet cases (3/4" thick, formaldehyde-free, made in Oregon), Blum Blumotion drawer slides (full extension, 
 
      soft closing, made in USA), Blum Blumotion hinges (soft closing, made in USA), and premium dovetailed drawer boxes come as a standard with every RTA cabinet we sell! 
 
      </p> 
 
     </li> 
 
     <li class="bathroom"> 
 
      <img src="img/bathroom1.jpg"> 
 
      <p>Our cabinets utilize a frameless and full overlay RTA cabinet construction method. This results in a seamless and high end design that is impossible to rival using outdated construction methods. Combine a frameless and full overlay construction 
 
      method with factory direct premium cabinet components and you will see nothing but beauty and longevity from your new RTA cabinet project. Enjoy your new RTA cabinet project from start to finish, order from Barker Cabinets today! 
 
      </p> 
 
     </li> 
 
     </div> 
 
     <div class="livingroom-laundy"> 
 
     <li class="livingroom"> 
 
      <img src="img/livingroom1.jpg"> 
 
      <p>Ordering RTA cabinets is easier than ever. We offer a state of the art website for placing and tracking all orders. Compile your RTA cabinets order at your own speed, check prices and play around with various options before you place your new 
 
      RTA cabinet order. Ordering RTA cabinets on the internet has never been easier than this! 
 
      </p> 
 
     </li> 
 
     <li class="laundry"> 
 
      <img src="img/laundry1.jpg"> 
 
      <p>It's easy to get started designing your project with our RTA cabinet line. Check out our online cabinet layout tutorials to see how easy it is to begin designing you project using our high end RTA cabinets. Layout and assembly is extremely simple 
 
      and can be performed by virtually anyone! 
 
      </p> 
 
     </li> 
 
     </div> 
 
    </ul> 
 
    </div> 
 
    <div class="footer"> 
 
    </div> 
 
</body> 
 

 
</html>

Deshalb mag ich Wäsche, Küche, Wohnzimmer und Bad in jeweils in ihrer eigenen Spalte in 1 Zeile.

Quelle

2016-07-28 alex

Ihr Code ist ein Chaos! und es ist überall. versuche eine bestimmte Frage zu stellen! was ich vorschlagen kann, ist es, Bootstrap zu verwenden Verwenden Sie Bootstrap-Tabelle oder Bootstrap-Gitter! das sollte dir helfen! –

Da dies eine wirklich grundlegende Frage ist, und Ihr Code ein wenig unordentlich ist, werde ich nur eine Antwort eingeben.

Stellen Sie einen Behälter mit einer Breite von 100% her. In diesem Container befinden sich 4 kleinere Container mit einer Breite von 25%. Ein Inhalt innerhalb eines div. Lass sie alle schweben. Wenden Sie clearfix auf das übergeordnete Element an.

Dies ist ein hilfreicher Artikel, der Ihnen hilft zu entscheiden, wie Sie Ihr Problem angehen. Wenn es Ihnen nichts ausmacht, schönes, sauberes HTML zu lernen und eine schnelle Lösung zu finden, könnten Sie Bootstrap-Spalten finden. http://www.w3schools.com/css/css_float.asp

.container{ 
width:100%; 
margin:0 auto; 
} 

.box{ 
width:25%; 
float:left; 
}

Quelle

2016-07-28 22:07:10

Antwort

Verwandte Themen