同じ行の2 divsの位置

私は最初のサイトをレイアウトしようとしています。同じ行に2つのdivを配置することに固執しています。私は達成しようとしているレイアウトを示す下の画像を投稿しました。同じ行の2 divsの位置

これは私が、現時点では2つのdivを持っているコードです。

<div class="full-width"> 
    <div class="logo"> 
     <img src="img/logo.png"/> 
    </div> 
    <div class="social"> 
     <ul class="social-icons"> 
     <li><img src="img/facebookSS.png"/></li> 
     <li><img src="img/twitter.png"/></li> 
     <li><img src="img/instagramSS.png"/></li> 
     </ul> 
    </div> 
    <div class="address"> 
    <p>Address to go here</p> 
    </div> 
    </div>

私はCSSで少し遊んでいますが、それは正しいとは言えません。

私が探しているのは、上記のすべてが1列にあり、下の列にナビがあります。希望は意味をなさない。私はブートストラップのようなフレームワークを使用していないので、自分のクラスなどを使用しています。

* { 
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box; 
} 

    body { 
    font-size: 20px; 
    font-family: 'Open Sans', sans-serif; 
    color: #fff; 
    position: relative; 
} 

.logo { 
    width: 300px; 
    height: auto; 
    position: relative; 
    display: inline-block; 
} 

.logo img { 
    width: 100%; 
    height: auto; 
} 

.social { 
    display: inline-block; 
    float: right; 
    margin-right: 20%; 
} 

.social li { 
    display: inline-block; 
} 

.social li img { 
    width: 50px; 
    height: auto; 
} 

.full-width { 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
}

出典

2016-09-09 rufus

あなたの周りで遊んだCSSを投稿するには – rlemon

通常、divはデフォルトで全体の行を占めます。それが彼らの設計方法です。 –

もちろん、それはwouldntそれを助けるだろう、そこにここであなたは私が元の投稿にそれを追加した行くかもしれないかもしれないかもしれない – rufus

divのコンテナをさらに作成する必要があります。ここでは非常に基本的な例を説明することである。

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="test.css"> 
    <title></title> 
</head> 
<body> 



<div class="container"> 
    <div id="one"></div> 
    <div id="two"> 
     <div id="three"></div> 
     <div id="four"></div> 
    </div> 
</div> 
</body> 
</html>

コンテナクラスには、ページの全幅を取ると、あなたのナビゲーションバー上のすべてのものが含まれます。 Div 1はあなたのロゴになります。div 2はdiv 2の高さのパーセンテージを占めるより多くのdiv（3と4）を入れることができる別のコンテナです。これらの部門の1つの内部よりも、ソーシャルロゴとその住所を次の住所に入れて、その下に表示する必要があります。

* { 
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box; 
} 

.container { 
    width: 100%; 
} 

#one { 
    height: 300px; 
    width: 300px; 
    background-color: green; 
    float: left; 
    margin-left: 25%; 
} 

#two { 
    height: 300px; 
    width: 500px; 
    float: left; 
    margin-left: 10%; 
} 

#three { 
    height: 30%; 
    width: 100%; 
    background-color: yellow; 
} 

#four { 
    height: 70%; 
    width: 100%; 
    background-color: blue; 
}

これは、あなたのアイデアのための概念として使用されるように、ちょうど非常に基本的な例である：ここではCSSです。明らかに安っぽい背景色を削除し、

出典

2016-09-09 18:38:47

おかげさまでありがとうございました。そこには完璧だと思われます。唯一のことは、div 1のロゴをページの中央に配置する必要があることです。私はそれを解決することができます再生し、参照してください。 – rufus

更新変更：

を私はあなたがmargin:auto;と、その中に何かを中央することができます定義された幅を、持つクラス.topとdiv要素を作成しました。あなたのソーシャルアイコンの周りにセクションを作成し、それを正しくフローティングしました。これはロゴが中央に配置されているため、これは私の前のものより良い例です。

私はこのことができます願っています：すべてのアドバイスhttps://jsfiddle.net/0sptpx0j/3/

出典

2016-09-09 18:39:37

こんにちはみんなのおかげで、私はそのルートを下るために絶対的な位置について読んだ後にしました。これは私が思いついたものです。

<div class="full-width"> 
    <div class="logo"> 
    <img src="img/logo.png"/> 
    </div> 
    <div class="social"> 
    <div class="social-list"> 
     <ul class="icons"> 
     <li><img src="img/facebookSS.png"/></li> 
     <li><img src="img/twitterSS.png"/></li> 
     <li><img src="img/instagramSS.png"/></li> 
     </ul> 
    </div> 
    <div class="address"> 
     <p>Address goes in here</p> 
    </div> 
    </div> 
</div> 


.logo { 
    width: 300px; 
    height: auto; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

.logo img{ 
    width: 100%; 
    height: auto; 
} 

.social { 
    float: right; 
    width: 300px; 

} 

.social-list { 
    width: 100%; 
} 

.icons { 
    list-style: none; 
    padding: 0; 
} 

.icons li { 
    display: inline-block; 
    margin-right: 10px; 

} 
.icons img { 
    width: 50px; 
    height: auto; 
} 

.full-width { 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
}

出典

2016-09-10 08:29:45 rufus

答えて

関連する問題