Question

我对CSS和HTML很陌生，所以我无法将两个div对齐。

这是我的HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>cards</title>
        <link rel="stylesheet" type="text/css" href="mystyle.css"/>
    </head>
    <body>
        <div id="card_container">
            <div id="card_image_container">
                <img src="https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png"/>
            </div>
            <div id="card_content_container">
                <div id="card_content_title">
                    <h1>ADVERT</h1>
                    <h2>EXAMPLE
                </div>
                <div id="card_content_text">
                    <p>
                    <b>Heading</b><br/>
                    Info
                    </p>

                    <p>
                    <b>Heading 2</b><br/>
                    Info 2
                    </p>
                </div>
                <div id="card_content_actions">

                </div>
            </div>
        </div>
    </body>
</html>

这是我的CSS：

*{
    padding: 0px;
    margin: 0px;
}

#card_container{
    margin-left: auto;
    margin-right: auto;
    width: 36%;
    margin-top: 10%;
    border: 1px solid grey;
}
#card_container > div{
    display: inline-block;
}
#card_image_container{
    width: 40%;
    background-color: green;
}
#card_image_container img{
    vertical-align: bottom;
    width: 100%;
    height: 100%;
}
#card_content_container{
    vertical-align: top;
    background-color: red;
    width: 59%;
}

这就是我遇到的问题：

white spaces around div

正如你所看到的那样 - 我的div周围有空白区域，我知道这是由于剩余1％的宽度，但如果我改变了我的：

#card_content_container{
    vertical-align: top;
    background-color: red;
    width: 59%;
}

宽度为60％，content_container移动到下一行。

我需要card_content_container来填充剩余的60％才能完美对齐。

这是js小提琴：

https://jsfiddle.net/gbcdp2on/

Answer 1

内联元素对代码中的空白区域很敏感 - 因此只需删除空白区域即可。在您的情况下，您需要在两个div之间删除它，如</div><div id="card_content_container">

<强> jsFiddle example

另一种选择是将div浮动在左边：

#card_image_container {
  width: 40%;
  background-color: green;
  float:left;
}

<强> jsFiddle example

Answer 2

您可以使用flexbox

#card_container {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 36%;
    margin-top: 10%;
    border: 1px solid grey;
}
#card_image_container{
    flex: 4;
    background-color: green;
}
#card_content_container{
    flex: 6;
    vertical-align: top;
    background-color: red;
}

https://jsfiddle.net/2sq6gu79/

Answer 3

尝试使用display:flex

包装父容器

*{
	padding: 0px;
	margin: 0px;
}

#card_container{
  display:flex;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	margin-top: 10%;
	border: 1px solid grey;
}

#card_image_container{
	width: 40%;
	background-color: green;
}
#card_image_container img{
	width: 100%;
	height: 100%;
}
#card_content_container{
	background-color: red;
	width: 60%;
}

		<div id="card_container">
			<div id="card_image_container">
				<img src="https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png"/>
			</div>
			<div id="card_content_container">
				<div id="card_content_title">
					<h1>ADVERT</h1>
					<h2>EXAMPLE
				</div>
				<div id="card_content_text">
					<p>
					<b>Heading</b><br/>
					Info
					</p>
					
					<p>
					<b>Heading 2</b><br/>
					Info 2
					</p>
				</div>
				<div id="card_content_actions">
				
				</div>
			</div>
		</div>

Answer 4

您的问题是内联块元素之间的空白

将59％设置为60％然后更新标记，使其不包含内联块元素之间的空格

<div id="card_image_container">
     ...
</div><div id="card_content_container">
     ....
</div>

CSS

#card_content_container{
    width: 60%;
}

当您设置60％宽度时空间存在的原因是因为您的元素是内联块，因此空白区域计为空格。如果您希望它更容易阅读，还有其他方法可以编写html

例如在

之间使用评论

<div id="card_image_container">
     ...
</div><!--
--><div id="card_content_container">
     ....
</div>

有很多方法可以实现您想要的效果，但您的特定问题是内联块元素之间的空间

Answer 5

您可以使用flexbox实现此目的。

*{
    padding: 0px;
    margin: 0px;
}

#card_container{
    display: flex;
  margin: auto;
    width: 36%;
    margin-top: 10%;
    border: 1px solid grey;
}
#card_image_container{
    width: 40%;
    background-color: green;
}
#card_image_container img{
    vertical-align: bottom;
    width: 100%;
    height: 100%;
}
#card_content_container{
    vertical-align: top;
    background-color: red;
    width: 60%;
}

无法将两个div对齐

5 个答案: