编辑:我能够通过切换到基于 float 的布局来解决这个问题。不确定使用基于内联 block 的网格是否可以解决问题。 (我想我可以使用 position:relative 或 absolute，但这似乎是个坏主意。)这是我的代码笔:https://codepen.io/mattgwater/pen/yXBqoe (如果全屏则有效)Ehsan 的回答也演示了如何从根本上进行这种布局，并且可能是优秀代码的更好示例。
我正在尝试根据此处图片中的模板构建一个网站。 https://assets.themuse.com/uploaded/attachments/14846.png?v=None
但是，如果我在左栏中有一个图像，它会导致右栏中的所有文本都位于图像下方。我该如何解决这个问题？
这是我的代码笔:https://codepen.io/mattgwater/pen/yXBqoe?editors=1100#0
我的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="/Fonts/myFontsWebfontsKit/MyFontsWebfontsKit.css">
<link rel="stylesheet" href="/main.css">
</head>
<body>
<nav>
<div class="col left">
<div>
<h1 class="title">MATT GOLDWATER</h1>
</div>
</div><!--
--><div class="col right">
</div>
</nav>
<div class="nav-content-separator"></div>
<section>
<div class="col left">
<img class="profilepic" src="https://res.cloudinary.com/dyr8j9g6m/image/upload/v1496375439/my-headshot_bxpjqk.png" alt="Matt Goldwater">
<!--<p>yo</p>-->
</div><!--
--><div class="col right">
<p class="about">I want this sentence to be aligned with the top of the image.</p>
</div>
</section>
</body>
</html>
我的 CSS(我也有规范化 CSS)
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.title {
color: #6fc3c3;
/*font-family: FuturaDCD-Lig;*/
font-weight: bold;
font-size: 32px;
text-align: center;
letter-spacing: .05em;
}
.col {
width: 50%;
display: inline-block;
/*white-space: nowrap;*/
}
.left {
padding-left: 10%;
}
.profilepic {
padding-top: 7%;
height: 450px;
margin: 0 auto;
display: block;
}
.nav-content-separator {
border: 1px solid #e8e8e8;
}
.about {
font-family: Avenir;
}
最佳答案
I changed your code,use wrapper and float and other Properties.
#wrapper {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.title {
color: #6fc3c3;
float: left;
}
.right {
float: right;
}
.left {
float: left;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
margin-right: 1%;
}
li a {
color: #ccc;
text-decoration: none;
}
.col {
width: 50%;
box-sizing: border-box;
}
nav {
border-bottom: #ccc solid 1px;
overflow: auto;
}
.profilepic {
max-width: 410px;
width: 100%;
}<div id="wrapper">
<nav>
<div class="col title"><h2>KRISTA GRAY</h2></div>
<div class="col right">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="col left">
<img class="profilepic" src="https://cdn.shopify.com/s/files/1/1424/5850/products/Circular_Stickers_CG_1024x1024.jpg?v=1486690726" alt="Me">
</div>
<div class="right col">
<h4>Lorem Ipsum: common examples</h4>
<p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found in the original.
</p>
</div>
</div>
</div>关于css - 右栏中的文字低于左栏中的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44320232/