文字旁邊的圖像對齊
[英]Image align next to the text
問題描述
我在緊要關頭。 我正在盡力使我的培訓網站頁面看起來像這樣： 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;
}
3 個解決方案
解決方案1
0 已采納 2014-08-13 11:37:15
我想這就是你要找的
我所做的就是將圖像放入一個單獨的div ，將信息放在一個單獨的div 。 然后我disaply: inline-block添加disaply: inline-block兩者，使它們保持在同一行。 NexT我給.image div設置了33％的寬度，給.info div設置了66％的寬度，最后將info div垂直對齊到頂部
希望這可以幫助。
編輯：我將包裝器的寬度更改為1000像素，以便它更接近我在屏幕快照中看到的內容。
解決方案2
0 2014-08-13 12:11:57
HTML文件
<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" style="left: 10%;top: 77%;">
<img src="http://i.imgur.com/HnnetnV.png" class="img2" alt="IPHONE" style="top: 95%; left: 7%;">
<div class="main-text-heading" style="position: absolute; left: 32%; top: 81%; text-align: justify; width: 50%;"">
<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><!-- 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 {
position: absolute;
}
.first-panel-heading {
text-align: center;
}
.first-panel-text {
}
p {
margin: 0;
}
div{
clear: both;
}
如有任何疑問，請回來...
注意：根據您的要求和分辨率更改頂部和左側樣式
解決方案3
0 2014-08-13 12:25:52
猜猜是更多類似的東西。
創建了環繞Pic和文本的包裝器。 為圖像創建了一個額外的div。 像漂浮
.first-panel {
float:left;
width:35%;
}
.images {
float:left;
width:30%;
}
.second-panel {
float:right;
width:35%;
}
完成
問候。
在文字旁邊對齊圖片
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.