htmlで2つのdivを一緒に表示するにはどうすればいいですか？

-1

2つの部門を並べて表示したい。私は可能な解決策をいくつか試しましたが、それでも重複しています。前もって感謝します。htmlで2つのdivを一緒に表示するにはどうすればいいですか？

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
    .sidebar 
    { 
     width:200px; 
     background:yellow; 
     color:orange; 
     padding:50px; 
    } 
    .content 
    { 
     width:600px; 
     background:silver; 
     color:red; 
     padding:50px; 
    } 
</style> 
</head> 
<body> 
     <div class="sidebar"> 
     This is sidebar div 
    </div> 
    <div class="content"> 
     This is Content div 
    </div> 
</body> 
</html>

出典

2016-05-31 kalathiya ankur

（[互いに隣CSS 2つのdiv]の可能性のある重複http://stackoverflow.com/questions/446060/css-two- divs-next-to-each-other） –

ブートストラップを使用すると、シンプルになります –

使用float:left;Learn about CSS float Property

.sidebar 
 
    { 
 
     width:150px; 
 
     background:yellow; 
 
     color:orange; 
 
     padding:50px; 
 
\t \t float:left; 
 
    } 
 
    .content 
 
    { 
 
     width:200px; 
 
     background:silver; 
 
     color:red; 
 
     padding:50px; 
 
\t \t float:left; 
 
    }

<div class="sidebar"> 
 
\t This is sidebar div 
 
</div> 
 
<div class="content"> 
 
\t This is Content div 
 
</div>

出典

2016-05-31 06:20:31

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title></title> 
 
<style type="text/css"> 
 
    .sidebar 
 
    { 
 
     width:200px; 
 
     background:yellow; 
 
     color:orange; 
 
     float:left; 
 
     padding:50px; 
 
    } 
 
    .content 
 
    { 
 
     width:200px; 
 
     background:silver; 
 
     color:red; 
 
     float:left; 
 
     padding:50px; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
     <div class="sidebar"> 
 
     This is sidebar div 
 
    </div> 
 
    <div class="content"> 
 
     This is Content div 
 
    </div> 
 
</body> 
 
</html>

出典

2016-05-31 06:21:01

私はあなたが1行に2つのdivを表示することを意味すると思います。それは正しいので、単純なfloatを追加するだけです：最初のdivに残して問題を解決します。

同様：

.sidebar { 
     width: 200px; 
     background: yellow; 
     color: orange; 
     padding: 50px; 
     float:left; 
    }

出典

2016-05-31 06:22:44

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
<style type="text/css"> 
    .sidebar 
    { 
     width:200px; 
     background:yellow; 
     color:orange; 
     padding:50px; 
     float:left; 
    } 
    .content 
    { 
     width:600px; 
     background:silver; 
     color:red; 
     padding:50px; 
     float:left; 
     margin-left:10px; 
    } 
</style> 
</head> 
<body> 
    <div class="sidebar"> 
     This is sidebar div 
    </div> 
    <div class="content"> 
     This is Content div 
    </div> 
</body> 
</html>

出典

2016-05-31 06:23:40

ただのdivや使用ディスプレイの両方にメインの親を追加しました：それへのインラインフレックス。両方のdivに委ね問題を修正します：フロートが追加

.main{ 
 
    display:inline-flex; 
 
} 
 
.sidebar 
 
    { 
 
     width:200px; 
 
     background:yellow; 
 
     color:orange; 
 
     padding:50px; 
 
    } 
 
    .content 
 
    { 
 
     width:600px; 
 
     background:silver; 
 
     color:red; 
 
     padding:50px; 
 
    }

<div class="main"> 
 
<div class="sidebar"> 
 
     This is sidebar div 
 
    </div> 
 
    <div class="content"> 
 
     This is Content div 
 
    </div> 
 
</div>

出典

2016-05-31 06:24:27

。

CSSコード：

.sidebar 
    { 
     width:200px; 
     background:yellow; 
     color:orange; 
     padding:50px; 
     float:left; 
    } 
    .content 
    { 
     width:600px; 
     background:silver; 
     color:red; 
     padding:50px; 
     float:left; 
    }

htmlコード：

<div> 
     <div class="sidebar"> 
      This is sidebar div 
     </div> 
     <div class="content"> 
      This is Content div 
     </div> 
    </div>

とあなたのdivの一つは、あなたがあなたのdivの幅を調整する必要があり下がっている場合。

出典

2016-05-31 06:27:13

フロートを適用するには：これはすべき

...あなたはfloat:leftを追加.contentにこのコードを追加し、.sidebar

にする必要があり

：この問題を解決するためのウィジェット

出典

2016-05-31 06:27:26

に委ねヘルプ

http://www.w3schools.com/cssref/pr_class_float.asp ..

divので、あなたに

出典

2016-05-31 06:28:30

を助けるために喜んでblockレベル要素あるので、その直接の親の100％の幅を占有します。そのため、float - 非常に便利なCSSプロパティを使用せずに、それらを水平に配置することはできません。

は、だからあなたのCSSであなたは、所望の結果を得るために、以下のようにプロパティを追加する必要があります

.sidebar { 
    float: left; 
}

ウォッチデモhere。

floatについて詳しく知りたい場合は、知識の海であるGoogleをいつでも利用できます。

出典

2016-05-31 06:45:24 Shashank

使用CSS float Property

float: none|left|right|initial|inherit;

.sidebar { 
 
    width: 200px; 
 
    background: yellow; 
 
    color: orange; 
 
    padding: 50px; 
 
    float: left; 
 
} 
 
.content { 
 
    width: 200px; 
 
    background: silver; 
 
    color: red; 
 
    padding: 50px; 
 
    float: left; 
 
}

<div class="sidebar"> 
 
    This is sidebar div 
 
</div> 
 
<div class="content"> 
 
    This is Content div 
 
</div>

出典

2016-05-31 06:53:27

htmlで2つのdivを一緒に表示するにはどうすればいいですか？

答えて

関連する問題