div（画像のみ）とdiv（テキスト）

Question

私は自分のスキルをスキルのリスト、左のスキル、右の写真と揃えることができますか？

私がしたことは、リストと写真を別々の「div」の中に入れていることです。 "display：inline-block;"を使用しました。 CSSのプロパティ

注意：両方のdivに「width：50％;」があります。

.divIN { margin: 25px 0px 25px 0px;} 
 

 
    .both { 
 
     width: 50%; 
 
     display: inline-block; 
 
    } 
 

 
    #imag { 
 
     width: 100%; 
 
     height: auto; 
 
    }

<div id="top" class="divIN"> 
 
     <div class="both"> 
 
      <h1>Present Skills</h1> 
 
      <ul> 
 
       <li>C/C++</li> 
 
       <li>Python</li> 
 
       <li>HTML(CSS, Bootstrap)</li> 
 
       <li>Java(Not Right Away!)</li> 
 
      </ul> 
 
     </div> 
 
     <div class="both"><img src="https://drive.google.com/uc?id=0B9tI4qB-P3oAZjJ6dWZ5VHpPRkU" alt="Image not displayed" id="imag"> 
 
     </div> 
 
    </div>

Answer 1

あなたはdisplay:inline-blockを使用すると、あなただけの要素間の小さなスペースが常にあります両方のdiv要素に

.divIN { margin: 25px 0px 25px 0px;} 
 

 
    .both { 
 
     width: 50%; 
 
     display: inline-block; 
 
     float:left; 
 
    } 
 

 
    #imag { 
 
     width: 100%; 
 
     height: auto; 
 
    }

<div id="top" class="divIN"> 
 
     <div class="both"> 
 
      <h1>Present Skills</h1> 
 
      <ul> 
 
       <li>C/C++</li> 
 
       <li>Python</li> 
 
       <li>HTML(CSS, Bootstrap)</li> 
 
       <li>Java(Not Right Away!)</li> 
 
      </ul> 
 
     </div> 
 
     <div class="both"><img src="https://drive.google.com/uc?id=0B9tI4qB-P3oAZjJ6dWZ5VHpPRkU" alt="Image not displayed" id="imag"> 
 
     </div> 
 
    </div>

Answer 2

をfloat:leftを追加することができます。基本的には、ブラウザが追加する文字間のスペースです。 inline-blockの使用が不可欠な場合には、これを避けるためにstackoverflowで見つけることができる多くのトリックがあります.2番目のdivに小さな余白を追加すると、font-size：0;以下の例のようにhtmlのdivタグに戻り値を追加するハックもあります。

簡単な方法は、インラインブロックのフロートinsteedの使用であるべきである

.divIN { margin: 25px 0px 25px 0px;} 
 

 
    .both { 
 
     width: 50%; 
 
     display: inline-block; 
 
    } 
 

 
    #imag { 
 
     width: 100%; 
 
     height: auto; 
 
    }

<div id="top" class="divIN"> 
 
     <div class="both"> 
 
      <h1>Present Skills</h1> 
 
      <ul> 
 
       <li>C/C++</li> 
 
       <li>Python</li> 
 
       <li>HTML(CSS, Bootstrap)</li> 
 
       <li>Java(Not Right Away!)</li> 
 
      </ul> 
 
     </div 
 
     ><div class="both"><img src="https://drive.google.com/uc?id=0B9tI4qB-P3oAZjJ6dWZ5VHpPRkU" alt="Image not displayed" id="imag"> 
 
     </div> 
 
    </div>

How to remove the space between inline-block elements?

Answer 3

次の2つのhalfs、後に画面を分割してフロートに沿って使用することができあなたの要件に基づいてそれをカスタマイズします。

.divIN { margin: 25px 0px 25px 0px;} 

    .both { 
     width: 50%; 
     display: inline-block; 
     float: left; 
    } 

    #imag { 
     width: 80%; 
     height: auto; 

    } 

    <div id="top" class="divIN"> 
      <div class="both" style="width:50%"> 
       <h1>Present Skills</h1> 
       <ul> 
        <li>C/C++</li> 
        <li>Python</li> 
        <li>HTML(CSS, Bootstrap)</li> 
        <li>Java(Not Right Away!)</li> 
       </ul> 
</div> 
      <div class="both" style="width:50%"><img src="https://drive.google.com/uc?id=0B9tI4qB-P3oAZjJ6dWZ5VHpPRkU" alt="Image not displayed" id="imag"> 
      </div> 
     </div> 

Answer 4

フレックスレイアウトも使用できます。

.divIN 
 
{  
 
    margin: 25px 0px 25px 0px; 
 
    display:flex; 
 
} 
 

 
    .both { 
 
     flex:1; 
 
    } 
 

 
    #imag { 
 
     width: 100%; 
 
     height: auto; 
 
    }

<div id="top" class="divIN"> 
 
     <div class="both"> 
 
      <h1>Present Skills</h1> 
 
      <ul> 
 
       <li>C/C++</li> 
 
       <li>Python</li> 
 
       <li>HTML(CSS, Bootstrap)</li> 
 
       <li>Java(Not Right Away!)</li> 
 
      </ul> 
 
     </div> 
 
     <div class="both"><img src="https://drive.google.com/uc?id=0B9tI4qB-P3oAZjJ6dWZ5VHpPRkU" alt="Image not displayed" id="imag"> 
 
     </div> 
 
</div>