Question

我正处于紧张状态。我正在努力让我的培训网站块看起来像这样：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;
}

Answer 1

我认为这就是你要找的东西

CODEPEN

我所做的是将图片放在单独的div中，将信息放在单独的div中。然后我将disaply: inline-block添加到两者中，以便它们保持在同一行。 NexT我给.image div宽度为33％，而.info div宽度为66％，最后将信息div垂直对齐到顶部

希望这有帮助。

编辑：我将包装宽度更改为1000px，使其更接近我在屏幕截图中看到的内容。

Answer 2

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;
}

请回复任何澄清......

注意：根据您的要求和分辨率更改顶部和左侧样式

Answer 3

猜猜它更像是那样。

Codepen

创建了一个封装器，包括Pic和两个文本。为图像创建了一个额外的div。像

一样漂浮

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

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

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

完成

问候。

图像旁边的文字对齐

3 个答案: