以HTML/CSS爲中心的靈活尺寸佈局

-1

我需要創建一個登錄頁面，其中包含頂部帶有文本的圖像，下面有幾個視頻以及2像素的帶狀線圖像，我需要它們以便堅持使用底部。以HTML/CSS爲中心的靈活尺寸佈局

<html> 
... 
<body> 

<img src="topimage.png" alt="" /> 

<table> 
<tr> 
<td>Video 1 here</td> 
<td>Video 2 here</td> 

<img src="2pixelhightimage.png" alt="" />

基本上，我需要它的中心位置，相對看屏幕的尺寸所以基本上調整到補償的屏幕分辨率。

我該怎麼做？

來源

2013-12-11 Satch3000

我不知道從哪裏開始的靈活部分，因爲如果做得不好，百分比可能非常棘手 – Satch3000

您可以通過在您的內容中添加包裝並將左右邊距設置爲自動，輕鬆地做到這一點。使用％而不是像素。

<div class="wrapper"> 

<img src="topimage.png" alt=""> 

<!-- No need to use table here. Just use divs for layout stuff. --> 
<table> 
    <tr> 
    <td>Video 1 here</td> 
    <td>Video 2 here</td> 
    </tr> 
</table> 

<img class="fixed" src="2pixelhightimage.png" alt=""> 

</div>

然後是CSS：

.wrapper { margin: 0 auto;} 
img { max-width:100%; height:auto;} 
.fixed {position:fixed; bottom:0;}

來源

2013-12-11 11:35:02 NickHTTPS

像這樣的總體佈局？

<div class="wrap"> 
<div class="content">content goes here</div> 
</div> 

.wrap 
{ 
width:100%; 
background:gray; 
} 
.content 
{ 
width:80%; 
margin:0 20%; 
background:green; 
}

http://jsfiddle.net/k25gU/

來源

2013-12-11 11:37:12 andreib

創建包裝DIV內容周圍

<div id="wrapper"> 
    <!-- content here --> 
</div>

和風格像這樣

#wrapper { 
    width: 980px /* Maximum width of the content */ 
    max-width: 100% /* responsive width */ 
    margin: 0 auto; /* center the wrapper */ 
}

也不要使用表格的影片。表格列不會在小屏幕上打破。使用

<ul class="videos"> 
    <li class="video"> 
     <!-- content here --> 
    </li> 
    <li class="video"> 
     <!-- content here --> 
    </li> 
</ul>

然後CSS他們

.videos { 
    list-style: none; /* no bullets */ 
} 
.videos .video { 
    display: inline-block; /* videos side by side as long as there is space */ 
    width: 245px; /* 980px site width /4 = 245px = 4 videos in one row */ 
}

在底部的粘性帶狀線可能是：

<div class="strip-line-bottom"></div>

和CSS它

.strip-line-bottom { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 2px; 
    background: url(path/to/image.jpg) repeat-x; 
}

有關詳細信息，您將不得不提供更多的信息;-)

來源

2013-12-11 11:46:00

以HTML/CSS爲中心的靈活尺寸佈局

回答

相關問題