無法將div（僅限圖像）和div（具有文本）對齊

我想要的是我的圖片與我的技能列表，左側的技能，右側的圖片對齊。無法將div（僅限圖像）和div（具有文本）對齊

所以我所做的是，將列表和圖片放在單獨的「div」中。使用「display：inline-block;」屬性在CSS中。

請注意，div的寬度均爲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>

來源

2017-08-06 Vishwad

你需要圍繞這兩個列表，並在只有1格，而不是兩個圖像。 –

你可以添加float:left雙方的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>

來源

2017-08-06 11:15:30 Dij

非常感謝你，它的工作，但你能提供一個解釋發生了什麼後，我添加「浮動：左;」 – Vishwad

查看https://developer.mozilla.org/en/docs/Web/CSS/float – Dij

當您使用display:inline-block總有元素之間的小空間。基本上它是瀏覽器添加的字符之間的空間。有很多技巧可以在stackoverflow中找到，以避免這種情況，如果使用內聯塊是必要的，就像在第二個div中添加一個小的餘量一樣，使用font-size：0;或者甚至在html中添加div標籤的返回值，如下例所示。

簡單的方法應該是使用inline-block的浮法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?

來源

2017-08-06 11:22:43

您可以沿着用浮球隨將屏幕分成兩個半區和後根據您的要求定製它。

.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>

來源

2017-08-06 11:37:32 Abhi

您也可以使用彈性佈局。

.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>

來源

2017-08-06 11:58:31

無法將div（僅限圖像）和div（具有文本）對齊

回答

相關問題