HTML/CSS-如何製作4列文字

-2

我一直在試圖在每張圖片下方製作4列圖片和文字，並且在1列中列出所有4列。這是我到目前爲止有：HTML/CSS-如何製作4列文字

* { 
 
    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>

所以我想在每個自己列洗衣房，廚房，客廳和衛生間爲1行。

來源

2016-07-28 alex

你的代碼是一團糟！和它的所有地方。試着問一個特定的問題！我可以建議你使用引導程序使用引導程序表或引導程序網格！這應該對你有幫助！ –

因爲這是一個非常基本的問題，而且你的代碼有點混亂，我只需要輸入一個響應。

製作寬度爲100％的容器。在那個容器內有4個較小的容器，寬度爲25％。一個div內的一個內容。讓他們都浮起來。將清晰度應用於父級。

這是一篇有用的文章，可幫助您決定如何解決您的問題。如果你不關心學習漂亮的html並想快速修復，你可以找出引導列。 http://www.w3schools.com/css/css_float.asp

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

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

來源

2016-07-28 22:07:10

HTML/CSS-如何製作4列文字

回答

相關問題