將全屏寬度和高度部分分成3行

我有一個完整寬度和高度部分的html主頁。我怎樣才能把這部分分成3行。每個div均爲全寬，並具有響應式背景圖像。請建議我怎樣才能做到這一點與CSS和頁面響應。將全屏寬度和高度部分分成3行

2017-02-16 Subhasree Mazumder

嘗試添加一些代碼，你的問題 – Seeker

沒有代碼，沒有骰子 –

是它好吧，如果我張貼我正在工作的網頁的鏈接。 –

<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div style="width: 100%;"> 
 
     <div style="width: 35%; float: left; background-color:blue; padding-right:20px;"> 
 
      Div 1 
 
     </div> 
 

 
     <div style="width: 30%; float: left;background-color:cyan;"> 
 
      Div 2 
 

 
     </div> 
 

 

 
     <div style="width: 30%; float: left; background-color:gold;"> 
 
      Div 3 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-02-16 09:23:19

謝謝，但我想要3行divs而不是列。我希望每個div都有一個響應式背景圖像。 –

Div 1

Div 2

Div 3

–

#page-wrap { 
 
    display:table; 
 
    width:90%; 
 
    border:1px solid #999; 
 
    border-radius:10px; 
 
    border-spacing:10px; 
 
    margin:auto; 
 
    background-color:#fff; 
 
    box-shadow:6px 6px 6px #999; 
 
} 
 
#page-wrap div { 
 
    display:table-cell; 
 
    width:33.33%; 
 
    padding:2%; 
 
    border:1px solid #999; 
 
    border-radius:10px; 
 
    background-image:linear-gradient(to bottom,#fff,#ddd); 
 
    box-shadow:inset 0 0 10px #999; 
 
    font-size:1.5vw; 
 
    word-wrap:break-word; 
 
    color:#666; 
 
} 
 
@media screen and (max-width:800px) { 
 
#page-wrap div { 
 
    font-size:2.0vw; 
 
    } 
 
} 
 
@media screen and (max-width:480px) { 
 
#page-wrap div { 
 
    font-size:2.5vw; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<title>untitled document</title> 
 
<link rel="stylesheet" href="/" media="screen"> 
 
<style media="screen"> 
 
</style> 
 
</head> 
 
<body background-color:#f0f0f0;> 
 
<div id="page-wrap"> 
 
<div id="left"></div> 
 
<div id="right"></div> 
 
<div id="mid"> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
 
    amet. Sed auctor vehicula commodo. 
 
</p> 
 
</div> 
 
</div> 
 
</body> 
 
</html>

來源

2017-02-16 09:27:07 khushi

現在可以檢查。 :-)。它是響應式的。你可以插入bgimage並嘗試。 – khushi

我覺得用那麼Flexbox將是最好的方式。看看這個筆：http://codepen.io/anon/pen/qRwZyW

* { margin: 0; padding: 0; } 
 
html, 
 
body, 
 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.child { 
 
    flex: 1; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 

 
.child1 { 
 
    background-image: url(https://unsplash.it/1201/1301/?random); 
 
} 
 

 
.child2 { 
 
    background-image: url(https://unsplash.it/1202/1302/?random); 
 
} 
 

 
.child3 { 
 
    background-image: url(https://unsplash.it/1203/1303/?random); 
 
}

<div class="container"> 
 
    <div class="child child1"></div> 
 
    <div class="child child2"></div> 
 
    <div class="child child3"></div> 
 
</div>

指南Flexbox的：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2017-02-16 09:34:49 Hendry

非常感謝，我現在就試試看，看看它是如何與我的圖像。 –

@SubhasreeMazumder很高興能幫到你！祝你網站好運！ – Hendry

嗨，我用過這個。你可以在鏈接http://www.grouporigin.com/clients/upload/WAHA_AR16/index.html –

這裏是下面的解決方案：有關背景2在你的CSS代碼末尾添加該媒體查詢CSS或媒體查詢響應css-

@media(max-width:767px){ 
.bg-2{background-position:right center;} 
}

body, 
 
html { 
 
    height: 100%; 
 

 
} 
 

 
.fullwidth { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
.repeat-x { 
 
    flex:1; 
 
    background-size: cover; 
 
    background-repeat:no-repeat; 
 
    background-position:center center; 
 
    
 

 

 
} 
 
.bg-1{background-image: url(https://dummyimage.com/1920/800/0011ff.jpg&text=Image+1);} 
 
.bg-2{background-image: url(https://dummyimage.com/1920/54e354/0011ff.jpg&text=Image+2);} 
 
.bg-3{background-image: url(https://dummyimage.com/1920/fa4f17/0011ff.jpg&text=Image+3);} 
 

 
@media(max-width:767px){ 
 
.bg-2{background-position:right center;} 
 
}

<div class="fullwidth"> 
 
    <div class="repeat-x bg-1">&nbsp;</div> 
 
    <div class="repeat-x bg-2">&nbsp;</div> 
 
    <div class="repeat-x bg-3">&nbsp;</div> 
 

 
</div>

來源

2017-02-16 09:35:24

非常感謝。我在我的網站上有這個，請看看這個鏈接是http://www.grouporigin.com/clients/upload/WAHA_AR16/index.html。主頁中帶有背景圖片的div的兩個部分沒有響應。我怎樣才能讓他們迴應。請建議 –

嗨，你在那裏，我需要幫助 –

是的，我在這裏..我認爲你需要玩這個背景位置..我應該給你的解決方案...？ –

您可以通過使用3 div把網頁切成3排，並給予height每個格

<html> 
<head> 
    <style type="text/css"> 
    .wrapper 
    { 
     height: 100%; 
     width: 100%; 
    } 
    .div1,.div3 
    { 
    height: 33.33%; 
    background-color:yellow; 

    } 
    .div2 
    { 
     height: 33.33%; 
    background-color:red; 
    } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="div1"> 
     Div 1 
     </div> 

     <div class="div2"> 
      Div 2 

     </div> 


     <div class="div3"> 
      Div 3 
     </div> 
    </div> 
</body> 
</html>

來源

2017-02-16 09:40:43 affaz

將全屏寬度和高度部分分成3行

回答

相關問題