文字旁边的图像对齐

Question

i am in a pinch. 我在紧要关头。 I was trying my best to get my training website block look like this: http://prntscr.com/4cd4gm But i have no idea anymore how to align those two. 我正在尽力使我的培训网站页面看起来像这样： http : //prntscr.com/4cd4gm但是我不知道如何将这两个对齐。 I can align pictures, but when it comes to text and paragraph, i fail. 我可以对齐图片，但是当涉及文字和段落时，我会失败。 I cant make them align to each other, paragraph never goes up.. I tried to do it with columns too, but failed. 我不能使它们彼此对齐，段落永远不会上升。我也尝试对列进行处理，但是失败了。 I think that its something easy and i am overthinking it. 我认为这很容易，但我想得太多。 Could someone help me out ? 有人可以帮我吗？ Thank you! 谢谢！ Here's the code. 这是代码。

http://codepen.io/anon/pen/KbhoB 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>

and css 和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;
}

Answer 1

I think this is what you are looking for 我想这就是你要找的

CODEPEN CODEPEN

what i did was put the images into a separate div and the info on the right in a separate div . 我所做的就是将图像放入一个单独的div ，将信息放在一个单独的div 。 Then I added disaply: inline-block to both so that they stay in the same line. 然后我disaply: inline-block添加disaply: inline-block两者，使它们保持在同一行。 NexT I gave the .image div a width of 33% and th .info div a width of 66% and finally vertically aligning the info div to top NexT我给.image div设置了33％的宽度，给.info div设置了66％的宽度，最后将info div垂直对齐到顶部

Hope this helps. 希望这可以帮助。

Edit: i changed the wrapper width to 1000px so that it is closer to what i see in the screenshot. 编辑：我将包装器的宽度更改为1000像素，以便它更接近我在屏幕快照中看到的内容。

Answer 2

HTML FILE 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 的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;
}

Kindly get back for any clarifications ... 如有任何疑问，请回来...

Note : Change the Top and Left styles according to your requirement and resolutions 注意：根据您的要求和分辨率更改顶部和左侧样式

Answer 3

Guess it´s more something like that. 猜猜是更多类似的东西。

Codepen 码笔

Created a wrapper arround Pic´s and both text´s. 创建了环绕Pic和文本的包装器。 Created an extra div for images. 为图像创建了一个额外的div。 Floating like 像漂浮

.first-panel {
float:left;
width:35%;
}

.images {
float:left;
width:30%;
}

.second-panel {
float:right;
width:35%;
}

Done 完成

Greetings. 问候。

文字旁边的图像对齐

问题描述

3 个解决方案

解决方案1
0 已采纳 2014-08-13 11:37:15

解决方案2
0 2014-08-13 12:11:57

解决方案3
0 2014-08-13 12:25:52

文字旁边的图像对齐

问题描述

3 个解决方案

解决方案1 0 已采纳 2014-08-13 11:37:15

解决方案2 0 2014-08-13 12:11:57

解决方案3 0 2014-08-13 12:25:52

解决方案1
0 已采纳 2014-08-13 11:37:15

解决方案2
0 2014-08-13 12:11:57

解决方案3
0 2014-08-13 12:25:52