右欄中的文字在左欄中的圖像下方

編輯：我能夠通過切換到基於浮動的佈局來解決此問題。不確定使用基於內聯塊的網格是否存在問題的解決方案。（我想我可以使用這個位置：相對或絕對的，但這似乎是一個壞主意。）這是我的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; 
}

來源

2017-06-02 MattGoldwater

你可以發佈你的CSS嗎？ –

@RalphDavidAbernathy哎呀！剛剛做到了。 – MattGoldwater

如果您嘗試將'float：right;'添加到'.col.right'，該怎麼辦？ –

我改變了你的代碼，使用包裝和浮動和其他屬性。

#wrapper { 
 
\t max-width: 1200px; 
 
\t width: 100%; 
 
\t margin: 0 auto; 
 
} 
 
.title { 
 
\t color: #6fc3c3; 
 
\t float: left; 
 
} 
 

 
.right { 
 
\t float: right; 
 
} 
 

 
.left { 
 
\t float: left; 
 
} 
 

 
ul { 
 
\t list-style-type: none; 
 

 
} 
 

 
li { 
 
\t display: inline-block; 
 
\t margin-right: 1%; 
 
} 
 
li a { 
 
\t color: #ccc; 
 
\t text-decoration: none; 
 
} 
 

 
.col { 
 
\t width: 50%; 
 
\t box-sizing: border-box; 
 
} 
 

 
nav { 
 
\t border-bottom: #ccc solid 1px; 
 
\t overflow: auto; 
 
} 
 

 
.profilepic { 
 
max-width: 410px; 
 
width: 100%; 
 
}

<div id="wrapper"> 
 
\t <nav> 
 
\t  <div class="col title"><h2>KRISTA GRAY</h2></div> 
 
\t  <div class="col right"> 
 
\t  \t <ul> 
 
\t  \t \t <li><a href="#">About</a></li> 
 
\t  \t \t <li><a href="#">Services</a></li> 
 
\t  \t \t <li><a href="#">Journal</a></li> 
 
\t  \t \t <li><a href="#">FAQs</a></li> 
 
\t  \t \t <li><a href="#">Contact</a></li> 
 
\t  \t </ul> 
 
\t  </div> 
 
\t </nav> 
 

 
\t <div class="container"> 
 
\t \t <div class="col left"> 
 
\t \t \t <img class="profilepic" src="https://cdn.shopify.com/s/files/1/1424/5850/products/Circular_Stickers_CG_1024x1024.jpg?v=1486690726" alt="Me"> 
 
\t \t </div> 
 
\t \t <div class="right col"> 
 
\t \t \t <h4>Lorem Ipsum: common examples</h4> 
 
\t \t \t <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. 
 
\t \t \t </p> 
 
\t \t </div> 
 

 
\t </div> 
 

 
    </div>

來源

2017-06-02 04:15:12 Ehsan

一些修改，在你的代碼：

給圖像max-width:100%以便圖像保留在父級中。從圖像樣式中刪除display:block。
以section樣式添加white-space:nowrap，以便忽略空白。我們需要忽略空格，因爲.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; 
}

來源

2017-06-02 03:28:09

這並沒有改變我的任何東西。圖像的寬度不是100％，我在HTML中有評論以使列布局工作。爲了清楚起見，文本應該是正確的。問題在於，當存在圖像時，它位於左側的內容下面。 – MattGoldwater

@MJGwater你檢查了演示嗎？ –

是的。但是當我從你的演示中複製並粘貼東西時，它不會改變我電腦上的任何東西。我已經嘗試了多次。（也許有normalize.css的問題） – MattGoldwater

請參閱您的山坳類有50％的寬度，然後你也加入填充左的10％。所以它超過100％。玩col寬度，使它成爲40％，它應該工作。

來源

2017-06-02 03:31:42 Rakesh

我在我的CSS中設置邊框大小框，以便不修復問題。要清楚我的文字在右欄。只要左側的內容具有圖像，它就在左側的內容下方。 – MattGoldwater

右欄中的文字在左欄中的圖像下方

回答

相關問題