Question

我想要的是我的照片与我的技能列表，左边的技能，右边的图片一致。

所以我所做的就是将列表和图片放在单独的＆＃34; div＆＃34;中。使用＆＃34; display：inline-block;＆＃34; CSS中的属性。

请注意，div都有＆＃34;宽度：50％;＆＃34;

＆＃13;

    .divIN {    margin: 25px 0px 25px 0px;}

    .both { 
        width: 50%;
        display: inline-block;
    }

    #imag {
        width: 100%;
        height: auto;
    }

＆＃13;

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

＆＃13;

Answer 1

当您使用display:inline-block时，元素之间的空间总是很小。基本上它是浏览器添加的字符之间的空间。你可以在stackoverflow中找到很多技巧来避免这种情况，如果使用内联块是必要的，比如在第二个div中添加一个小的边距，使用font-size：0;或者甚至是黑客在html中添加div标签的返回值，如下例所示。

简单的方法应该是使用内联块的浮动

＆＃13;

.divIN {    margin: 25px 0px 25px 0px;}

    .both { 
        width: 50%;
        display: inline-block;
    }

    #imag {
        width: 100%;
        height: auto;
    }

＆＃13;

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

＆＃13;

How to remove the space between inline-block elements?

Answer 2

您只需将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>

Answer 3

您可以使用float并将屏幕分成两半，然后根据您的要求进行自定义。

   .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

您也可以使用flex布局。

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

无法对齐div（仅限图像内部）和div（带文本）

4 个答案: