2016-06-23 5 views
-2

イメージを持つ2つのdivを並べて配置するにはどうすればよいですか? divを横に並べ、画像のサイズが画面のサイズと同じになるようにします。画面のサイズを小さくすると、画像の位置が上下にずれることがあります。 以下のhtmlのCSSはどのようになりますか?2つのdivを並べて配置する方法

<div class="container"> 
    <div class="wrapper"> 
    <div class="left"> 
     <img src="img1.png" /> 
    </div> 
    <div class="right"> 
     <img src="img2.png" /> 
    </div> 
    </div> 
</div> 
+1

駅へようこそ側のいずれかを座って含まれている要素を取得するには、CSS floatを使用することができますckオーバーフロー!あなた自身でこれを少なくともコード化しようとしています。スタックオーバーフローはコードを書くサービスではありません。私はあなたがGoogleを介して、またはSOを検索することによって、いくつかの追加の研究を行い、試してみることを提案します。それでも問題が解決しない場合は、**あなたのコード**に戻って、あなたが試したこととそれがうまくいかなかった理由を説明してください。 –

答えて

0

ブートストラップグリッドを使用してください。それはこのようなものかもしれません。

<div class="col-sm-12"> 
    <div class="col-sm-6"> 
     <img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width="30%"> 
    </div> 
    <div class="col-sm-6"> 
     <img src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="30%">  
    </div> 
</div> 

Demo

0

あなたは

.container { 
 
    width: 100%; 
 
} 
 
.left, .right { 
 
    width: 50%; 
 
    float: left; 
 
}
<div class="container"> 
 
    <div class="left"><img src='http://placehold.it/350x150'/></div> 
 
    <div class="right"><img src='http://placehold.it/350x150'/></div> 
 
</div>

Here is a fiddle to show an example of this

関連する問題