无法将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（具有文本）对齐

回答

相关问题