【发布时间】：2014-10-06 17:38:02
【问题描述】：
我正处于紧要关头。我正在尽力让我的培训网站块看起来像这样：http://prntscr.com/4cd4gm 但我不知道如何对齐这两者。我可以对齐图片，但是当涉及到文本和段落时，我失败了。我不能让它们相互对齐，段落永远不会上升。我也尝试用列来做，但失败了。我认为这很容易，我想多了。有人可以帮帮我吗？谢谢！这是代码。
http://codepen.io/anon/pen/KbhoB
<html lang="en">
<head>
<meta charset="UTF-8">
<title> xxx</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="grid">
<div class="headerbg">
<h1>Welcome to the homepage</h1>
</div><!-- END HEADERBG -->
<div class="first-panel">
<img src="http://i.imgur.com/Fy3HxDt.png" class="img1" alt="IPAD">
<img src="http://i.imgur.com/HnnetnV.png" class="img2" alt="IPHONE">
<div class="main-text-heading">
<h2 class="main-heading first-panel-heading">Flexible</h2>
<p class="main-text first-panel-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla</p>
</div>
</div><!-- END FIRST PANEL -->
<div class="second-panel">
<!-- <img src="img/clock-cloud.png" alt="Clock and Cloud"> -->
<h2 class="main-heading">Fast</h2>
<p class="main-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla</p>
</div><!-- END SECOND PANEL -->
</div><!-- END GRID -->
</body>
</html>
和css
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
/* --------------- TEXT ---------------*/
h1 {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1.875em; /* 30/16=1.975em */
font-weight: 700;
color: #fff;
}
.main-heading {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1.5em; /* 24/16 = 1.5 em */
line-height: 1.5;
color: #8b8b8b;
}
.main-text {
font-family: 'Lato', sans-serif;
font-weight: 300;
line-height: 1.4;
color: #8b8b8b;
}
/* --------------- FIXING WHITE SPACES -- */
body {
margin: 0;
overflow: hidden;
}
/* -------------- HEADER --------------- */
.headerbg {
position: absolute;
background-color: #04bf75;
width: 100%;
padding-top: 25.5em; /* 408/16 */
padding-left: 3em; /* 1200/400 */
display: block;
}
h1 {
text-align: center;
position: relative;
right: 0;
bottom: 204px; /* 408/2 */
margin-top: -0.9375em;/* 30/2; 15/16 */
}
/* --------------- MAIN SECTION ---------- */
/* --------------- FIRST PANEL ----------- */
.first-panel {
background-color: #e2e2e2;
margin: 0 auto;
padding: 25.5em 3em;
text-align: center;
width: 100%;
}
img {
float: left;
}
.first-panel-heading {
}
.first-panel-text {
}
p {
margin: 0;
}
div{
clear: both;
}
【问题讨论】：
标签： html css image text alignment