ブートストラップグリッドシステムで画像の高さをdivの横に並べるにはどうすればいいですか？

Question

私はこのようなimg要素と同じ行にdiv要素整列する：I整列する

（ボタンが水平画像のボトムラインと整列されるべきであるトップ側同じ。）

を彼らは完全にも、あまりにもモバイルデバイス（SM、例えばアプリ）、

**のindex.html **

<div class="row"> 
    <!-- IMAGE --> 
    <div class="col-md-8"> 

     <div class="thumbnail relative margin-bottom-3"> 
      <figure style="position: relative; overflow: hidden;"> 
       <img class="img-responsive" id="product-image" src="" alt="shop first image" style="width:610px; height:352px;"> 
      </figure> 
     </div> 
    </div> 
    <!-- /IMAGE --> 

    <!-- ITEM DESC --> 
    <div class="col-md-4"> 
     <div class="clearfix margin-bottom-15"> 
     </div> 

     <div class="form-group"> 
      {% crispy item_form %} 
     </div> 

    </div> 
    <!-- /ITEM DESC --> 
</div> 

で

どうすれば実装できますか？

Answer 1

これで、私はこれに答えようとします。

今のところ、ブートストラップの一部にして、従来のコードを実行しましょう。よりタイピング。

section{ 
 
display:flex; 
 
flex-wrap:wrap; 
 
flex-direction:column; 
 
position:relative; 
 
width:100%; 
 
height:200px; 
 
margin:0; 
 
padding:0; 
 
border:1px black solid;} 
 

 
.withImage{ 
 
display:flex; 
 
width:70%;} 
 

 
.withImage img{ 
 
width:100%;} 
 

 
.withForm{ 
 
width:30%; 
 
height:100%; 
 
padding:0; 
 
align-items:center; 
 
position:relative;} 
 

 
form{ 
 
width:100%; 
 
height:100%;} 
 

 
.withForm ul{ 
 
list-style:none; 
 
padding:0; 
 
margin:0; 
 
width:100%; 
 
height:100%; 
 
display:flex; 
 
flex-wrap:wrap; 
 
flex-direction:row; 
 
justify-content:center; 
 

 
} 
 

 
.withForm li{ 
 
width:80%; 
 
} 
 
.withForm li:last-child{ 
 
    display:flex; 
 
    align-items:flex-end; 
 
    justify-content:center; 
 
} 
 

 
.withForm input{ 
 
width:50%; 
 
margin:0px;}

<section> 
 
    <div class="content withImage"> 
 
    <img src="http://imagecolony.com/wp-content/uploads/2016/09/Wallpaper-Wide-803.jpg"> 
 
    </div> 
 
    <div class="content withForm"> 
 
    <form> 
 
    <ul> 
 
     <li>text <input type="text" placeholder="sometext"></li> 
 
     <li>text <input type="text" placeholder="sometext"></li> 
 
     <li>text <input type="text" placeholder="sometext"></li> 
 
     <li>text <input type="text" placeholder="sometext"></li> 
 
     <li><input type="submit" placeholder="enter"></li> 
 
    </ul> 
 
     </form> 
 
    </div> 
 
</section>

あなたはフレックス使用している場合、それはより簡単であるべきであり、すべての最初の私はuがあなたのコードを検査したことがない賭け。あなたのスクリプトを実行するためにクロムを使用している場合は、あなたのCSSで何が起こったのかを右クリックして調べてください。

あなたはall about flex in here

は、それが助けになりたい、それを見つけることができます。