css - 响应式网站文本对齐问题

Question

我是网络开发的新手。我在我的预览服务器上创建了一个单页网站，可以在 (林删除)

文本填充未在所有屏幕尺寸下正确设置。如何设置它以使其响应。

摆弄整个代码位于 http://jsfiddle.net

品味页面的CSS代码是

html {
height: 100%;
}
body
{
margin:0;
padding:0;  
background-image:url('../images/bgs/bg.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
margin: 0;
background-size:contain;
padding: 0;
height: 100%;
width: 100%;
position:relative;
bottom:0px;
top:0px;
margin-top:0px;
margin-bottom:0px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-height:100%;
max-width:100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bgs/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bgs/bg.jpg', sizingMethod='scale')";
font-family:Trebuchet MS, Arial, 'Helvetica', sans-serif;
font-size:1em;
}
.header
{
background-color:#212528;
}
.taste
{
background-image:url('../images/bgs/bg2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
margin: 0;
background-size:contain;
padding: 0;
height: 100%;
width: 100%;
position:relative;
bottom:0px;
top:0px;
margin-top:0px;
margin-bottom:0px;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
max-height:100%;
max-width:100%;
background-position:center;
}
.taste-div
{
padding-left:26em; 
width:18.750em;
text-align:justify;
padding-top:1.7em;
padding-bottom:9em;
display:block;  
color:#000;
font-family: Arial, 'Helvetica', sans-serif;
}

@font-face {
font-family: "Bebas";
src: url("../fonts/BebasNeue.eot") format("eot"),
url("../fonts/BebasNeue.woff") format("woff"),
url("../fonts/BebasNeue.ttf") format("truetype");
}

.banner {
background-color: #2a2f33;
margin-right:auto;
margin-left:auto;
padding-top:1%;
}
.title {
font-size: 110%;
font-weight: bold;
font-family:'Bebas';
display:block;
}
.title a {
color:#fff;
text-decoration:none;   
}
.header {
background-color: #2a2f33;
padding: 10px;
}
.nav{
list-style:none;
margin:0;
padding:0;
text-align:center;
font-family:'Bebas';
font-size:1.9em;
}
.nav li{
display:inline;
color:#fff;
}
.nav a{
display:inline-block;
padding-left:0.4em;
padding-right:0.4em;
}
.nav hover{
color:#cc8568;
}

html 是

<div class="taste-div">
Everyone is loving the sweet taste, easy drinking wines packed with flavour,  fruitiness and fun.</td>
<p><h3>sweet! White 75cl</h3>
<strong>Description!</strong> Sweet peach and apricot fruit flavours with a hint of lychee and tangy citrus. Ripe, fruity and very refreshing. <br />
<strong>Origin!</strong> Western Cape, South Africa<br />
<strong>Grape variety!</strong> Blend of Chenin Blanc, Semillon and Muscat d’Alexandrie<br />
<strong>Alcohol!</strong> 12% by volume</p>
sweet! Red 75cl
Description! Sweet red and black berry flavours with a hint of tropical fruit and mocha spice. Smooth, easy-drinking and moreish. Origin! Western Cape, South Africa
Grape variety! Blend of Merlot, Pinotage and Muscat d’Alexandrie
Alcohol! 13.5% by volume
</div>

Answer 1

我建议你使用 Twitter Bootstrap，你会方便你的生活。并使开发尽可能快。 http://getbootstrap.com/2.3.2/