響應4列網頁佈局HTML CSS DIVs

我期待建立一個簡單的網站，但我似乎無法得到正確的佈局。下面是我拍攝的一些圖片以及我的代碼。響應4列網頁佈局HTML CSS DIVs

問：是否每列（共4個）成爲自己的股利。每行都是div嗎？每個項目都是一個div嗎？我對此感到困惑。還想知道容器和包裝將如何應用於此。

下面的代碼。

<!DOCTYPE html> 
<html lang="en-us"> 
<head> 
<style> 

/* SECTIONS */ 
.section { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
} 

/* COLUMN SETUP */ 
.col { 
    display: block; 
    float:left; 
    margin: 1% 0 1% 1.6%; 
} 
.col:first-child { margin-left: 0; } 

/* GROUPING */ 
.group:before, 
.group:after { content:""; display:table; } 
.group:after { clear:both;} 
.group { zoom:1; /* For IE 6/7 */ } 


/* GRID OF FOUR */ 
.span_4_of_4 { 
    width: 100%; 
} 
.span_3_of_4 { 
    width: 74.6%; 
} 
.span_2_of_4 { 
    width: 49.2%; 
} 
.span_1_of_4 { 
    width: 23.8%; 
} 

/* GO FULL WIDTH BELOW 480 PIXELS */ 
@media only screen and (max-width: 480px) { 
    .col { margin: 1% 0 1% 0%; } 
    .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; } 
} 








.header, .footer { 
    padding: 5px; 
    color: white; 
    background-color: black; 
    clear: left; 
    text-align: center; 
} 
.aboutus { 
    float:right; 
    margin: 5px; 
    padding: 5px; 
    width: 25%; 
    height: auto; 
    border: 1px solid black; 
    background-color:#123; 
} 
    .aboutimage { 
    float:left; 
    margin: 5px; 
    padding: 5px; 
    width: 25%; 
    height: auto; 
    border: 1px solid black; 
    background-color:#123; 
} 
.about { 
    margin: 5px; 
    padding: 5px; 
    width: 100%; 
    height: 25%; 
    border: 1px solid black; 
    background-color:#989 
} 
.specials { 
    float: left; 
    margin: 10px; 
    padding: 10px; 
    width: 100%; 
    height: 300px; 
    border: 1px solid black; 
    background-color:#800; 
} 
.special1, .special2, .special3, .special4 { 
    margin: 1px; 
    padding: 1px; 
    width: 25%; 
    height: 50px; 
    border: 1px solid black; 
    background-color:#800; 
} 
.hours, .location { 

    margin: 5px; 
    padding: 5px; 
    width: 50%; 
    height: 150px; 
    border: 1px solid black; 
    background-color:#950; 
} 
.container{ 
    float: center; 
    margin: auto; 
    padding: 10px; 
    width: 100%; 
    max-width: 1500px; 
    height: 1068px; 
    border: 1px solid red; 
} 
.logistics{ 
    margin:1px; 
    padding:1px; 

} 

</style> 
</head> 
<body> 

<div class="container"> 

    <div class="header"> 
    <p>Restaurant</p> 
    <p>A family restaurant</p> 
    <span>This is some text that is going to span this div.</span> 
    </div> 


<div class="about"> 
    <div class="aboutus"> 
    <h2>About Us</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis. 
    </p> 
    </div> 
    <div class="aboutimage"> 
    <h2>About Us</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis. 
    </p> 
    </div> 
</div> 


<div class="specials"> 
    <div class="chicken"> 
    <h2>About Us</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis. 
    </p> 
    </div> 
    <div class="pork"> 
    <h2>About Us</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis. 
    </p> 
    </div> 
</div> 


<div class="section group"> 
    <div class="col span_1_of_4"> 
    <p>This is some text</p> 
    </div> 
    <div class="col span_1_of_4"> 
    <p>This is some text</p> 
    </div> 
    <div class="col span_1_of_4"> 
    <p>This is some text</p> 
    </div> 
    <div class="col span_1_of_4"> 
    <p>This is some text</p> 
    </div> 
</div> 



<div class="logistics"> 
    <div class="hours"> 
    <h2>Hours of operation</h2> 
    <p>Monday through Sunday</p> 
    <p>7:00 AM - 7:00 PM</p> 
    </div> 

    <div class="location"> 
    <h2>Location</h2> 
    <p></p> 
    <p></p> 
    </div> 
</div> 
<div class="footer">Copyright © KR</footer> </div> 

</body> 
</html>

來源

2016-11-22 Kevin

是的。爲了完成響應行爲，列必須是獨立的div。但是，爲什麼不使用Bootstrap或Foundation或其他一些CSS框架。不要試圖重新發明輪子，而應使用現有的輪子。這些框架將爲您完成這項工作。

來源

2016-11-22 13:59:14 pictoru

謝謝！我找到基礎很容易使用！非常感謝！ – Kevin

爲了更好地理解grid/divs/layout的工作原理，可能需要查看有關的Bootstrap文檔，該網格將幫助您。 http://getbootstrap.com/css/#grid

通常你有一個.row有.col（列），就像這樣：

<div class="row"> 
    <div class="col-md-3">25% of the row</div> 
    <div class="col-md-3">25% of the row</div> 
    <div class="col-md-3">25% of the row</div> 
    <div class="col-md-3">25% of the row</div> 
</div>

來源

2016-11-22 14:01:00

謝謝你的幫助！ – Kevin

響應4列網頁佈局HTML CSS DIVs

回答

相關問題