浮動小数点：divに残っていて、期待通りに動作しない

私は浮動小数点を浮かべることができませんdiv。浮動小数点：divに残っていて、期待通りに動作しない

私の投稿には私のウェブサイトから70%を使用しました。ちょっとしたテキストや何かを表示するために30%を使用したかったのです。

私はdivを作成しました。私が知っていることから、divをバナーの下の適切な場所に移動させるには、「float：left」を使用する必要があります。

私はあなたが何をしたいかを知らせるためにいくつかの写真を掲載します。

私は赤いdiv要素がそこに行くしていることとします

<body> 
<!-- the header of the website --> 
    <div class="header"> 
    <div class="logo"><img src="https://s32.postimg.org/npddlgddx/logo.png"></div> 
    <div class="header-text"> 
<!-- uncomment this later 
     <h1>The Witcher</h1> 
     <h2>The Wild hunt</h2> --> 
    </div> 
    <div class="header-menu"> 
     <ul> 
     <!-- header list --> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
    <!-- left content --> 
    <div class="left-content"> 
    <div class="posts"> 
     <h1> Blood and wine DLC </h1> 
     <!-- post images --> 
     <img src="https://s31.postimg.org/yvl2ismcr/photo1.png" class="img1" /> 
     <h1 style="margin-top: 55px"> Expansion Pass </h1> 
     <img src="https://s31.postimg.org/lg5ef4et7/photo2.jpg" class="img1" /> 
    </div> 
    </div> 
    <!-- right content --> 
    <div class="right-content"></div> 
</body> 
</html>

はあなたが間違っているものを私に伝えることができますがありますか？

また、コードが素晴らしいかどうか教えていただけますか？

出典

2016-06-18 Razvan Tutuianu

問題は何ですか？ –

'何が間違っているのですか'と 'コードが見えるかどうかを教えてください'の両方がここにあるのです。 –

私は何か間違ったことを申し訳ありません。私の問題は、ウェブページの一番下に少し赤い欄があり、その絵に円を描いたところでそれを移動したいのですが、私はこれを行うことができません。私は自分の "コンテンツ" divを70％作成し、私は私の赤いdivが私がフロートを使用する場合は使用しなかったその30％で行くことを望んだ：左が動作しませんでした。だから私はちょうどそこにその部門を移動したい。おかげで –

を削除し、この問題を解決することができます。
ここに実装されたコードが表示されます：https://jsfiddle.net/723fgs4d/1/

出典

2016-06-19 03:09:45

ありがとう、それは働いた。私は浮動小数点数を追加するのを忘れていました：左のコンテンツに左）:)あなたにもう一度感謝します。 –

それは働いた。クール。答えを正解と記すことを忘れないでください！ –

セット30％（任意）、マージン左へ.RIGHTコンテンツの絶対

.left-content{ 
width: 70%; 
border-right: 1px solid black; 
height: 900px; 
position: absolute; 
}

セット幅に.LEFTコンテンツの位置：自動車、及びフロートを除去ライン。

.right-content{ 
width: 30%; 
height:200px; 
background-color: red; 
margin-left: auto; 
position: relative; 
}

出典

2016-06-18 21:26:17

あなたは単に単にあなたのdiv（左と右のdiv）の両方にfloat: left;を追加する代わりにflexboxを使用してfloat

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    margin: 0; 
 
    background-color: #CED6D9; 
 
} 
 
/* header */ 
 

 
.header { 
 
    width: 100%; 
 
    height: 500px; 
 
    background: url("https://s31.postimg.org/8wabf75rf/header.jpg"); 
 
    opacity: 0.9; 
 
    background-size: cover; 
 
    overflow: hidden; 
 
} 
 
.header-text { 
 
    color: black; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    bottom: 0; 
 
    position: relative; 
 
} 
 
.header-text h2 { 
 
    margin-left: 30px; 
 
} 
 
.logo img { 
 
    width: 200px; 
 
    height: 150px; 
 
} 
 
.header-menu ul li { 
 
    list-style: none; 
 
    float: left; 
 
    padding: 15px 20px; 
 
} 
 
.header-menu ul li a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
.header-menu ul li:hover { 
 
    background-color: #8E8E8E; 
 
    border-radius: 7px; 
 
} 
 
.header-menu ul { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 
/* content */ 
 

 
.main { 
 
    display: flex 
 
} 
 
.left-content { 
 
    width: 70%; 
 
    border-right: 1px solid black; 
 
    height: 900px; 
 
} 
 
.posts { 
 
    width: 55%; 
 
    height: 300px; 
 
    border-radius: 3px; 
 
    margin-top: 20px; 
 
    margin-left: 60px; 
 
} 
 
.posts .img1 { 
 
    height: 380px; 
 
    width: 100%; 
 
} 
 
.posts h1 { 
 
    text-align: center; 
 
    color: white; 
 
} 
 
.right-content { 
 
    width: 100px; 
 
    height: 200px; 
 
    background-color: red; 
 
    flex: 1 
 
} 
 
/* responsive */ 
 

 
@media only screen and (max-width: 800px) { 
 
    .left-content { 
 
    width: 100%; 
 
    border-right: none; 
 
    } 
 
    .posts { 
 
    width: 100%; 
 
    margin-left: 0px; 
 
    } 
 
} 
 
@media only screen and (max-width: 500px) { 
 
    .header-menu ul li a { 
 
    color: black; 
 
    display: block; 
 
    } 
 
    .logo { 
 
    width: 50%; 
 
    margin: auto; 
 
    } 
 
    .left-content { 
 
    width: 100%; 
 
    height: 400px; 
 
    } 
 
    .posts .img1 { 
 
    height: 200px; 
 
    } 
 
}

<!-- the header of the website --> 
 
<div class="header"> 
 
    <div class="logo"> 
 
    <img src="https://s32.postimg.org/npddlgddx/logo.png"> 
 
    </div> 
 

 
    <div class="header-text"> 
 
    <!-- uncomment this later 
 
\t \t \t <h1>The Witcher</h1> 
 
\t \t \t <h2>The Wild hunt</h2> --> 
 
    </div> 
 
    <div class="header-menu"> 
 
    <ul> 
 
     <!-- header list --> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div class="main"> 
 
    <!-- left content --> 
 
    <div class="left-content"> 
 
    <div class="posts"> 
 
     <h1> Blood and wine DLC </h1> 
 
     <!-- post images --> 
 
     <img src="https://s31.postimg.org/yvl2ismcr/photo1.png" class="img1" /> 
 
     <h1 style="margin-top: 55px"> Expansion Pass </h1> 
 
     <img src="https://s31.postimg.org/lg5ef4et7/photo2.jpg" class="img1" /> 
 
    </div> 
 

 
    </div> 
 
    <!-- right content --> 
 
    <div class="right-content"></div> 
 
</div>

出典

2016-06-18 21:35:54 dippas

浮動小数点：divに残っていて、期待通りに動作しない

答えて

関連する問題