Question

编辑：我能够通过切换到基于浮动的布局来解决这个问题。使用基于内联块的网格不确定是否存在问题的解决方案。（我想我可以使用这个位置：相对或绝对，但这似乎是一个坏主意。）这是我的Codepen：https://codepen.io/mattgwater/pen/yXBqoe（如果是全屏幕则有效）Ehsan的回答演示了如何基本上做这个布局，可能是一个更好的代码的更好的例子。

我正在尝试根据此处图片中的模板构建一个网站。 https://assets.themuse.com/uploaded/attachments/14846.png?v=None

但是，如果左列中有图像，则会导致右列中的所有文本都位于图像下方。我该如何解决这个问题？

这是我的Codepen：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;
}

Answer 1

我更改了你的代码，使用了wrapper和float以及其他属性。

#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>

Answer 2

您的代码中几乎没有任何修改：

提供图片max-width:100%，以便图片保留在父图片中。从图片样式中删除display:block。
以white-space:nowrap样式添加section，以便忽略空格。我们需要忽略空格，因为.left和.right设置为width:50%，因此即使是空格的像素也会破坏布局。

演示：http://jsfiddle.net/GCu2D/1952/

.profilepic {
  padding-top: 7%;
  max-width: 100%;
  margin: 0 auto;
  display: inline;
}

section {
  white-space: nowrap;
}

Answer 3

看到你的col类的宽度为50％，然后你还要添加10％的padding-left。所以它超过100％。使用col宽度，使其达到40％，它应该可以工作。

右栏中的文字位于左栏中的图像下方

3 个答案: