右の列のテキストが左の列の画像の下に表示されます

編集：フロートベースのレイアウトに切り替えることでこの問題を解決できました。インラインブロックベースのグリッドを使用して問題の解決策があるかどうかは不明です。（私はポジションを使うことができると思う：相対的または絶対的だが、それは悪い考えである）ここに私の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％以上になります。列幅で再生し、40％にすると効果があります。

出典

2017-06-02 03:31:42 Rakesh

ボックスのサイズを私のCSSのborder-boxに設定して問題を解決しないようにしました。明確にするために、私のテキストは右の列にあります。左のコンテンツに画像がある場合は、左のコンテンツのすぐ下にあります。 – MattGoldwater

右の列のテキストが左の列の画像の下に表示されます

答えて

関連する問題