我手头紧。我尽力让我的培训网站 block 看起来像这样: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;
}
最佳答案
我想这就是你要找的
我所做的是将图像放入单独的 div 中，并将右侧的信息放入单独的 div 中。然后我将 disaply: inline-block 添加到两者中，以便它们保持在同一行中。接下来，我将 .image div 的宽度设置为 33%，将 .info div 的宽度设置为 66%，最后将 info div 垂直对齐到顶部
希望这对您有所帮助。
编辑:我将 wrapper 宽度更改为 1000px，以便它更接近我在屏幕截图中看到的内容。
关于html - 图片在文本旁边对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25284838/