如何删除div中两个元素之间的空白（参见图片）？
[英]How to remove white space between two elements in my div (see image)?
问题描述
我一直试图将3个不同的元素放入div并遇到问题。 我似乎无法摆脱标题和段落之间的巨大空白。 我使用了有关边距和填充的文档来解决此问题，尽管我已经取得了一些进展，但是仍然存在一些未解决的问题。
我的尝试：
<html>
<header>
<link rel="stylesheet" type="text/css" href="style2.css"></header>
<body class="about">
<div class="content-wrapper">
<img class="hk-img" src="hksquared.jpg" height= "400px" width="400px">
<h1 class="text-header-content">Web Development. Software Development. E-commerce. Photograpy.</h1>
<p class="text-content">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum.<br><br><br>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
</div>
</body>
</html>
CSS：
/*About page content*/
.content-wrapper{
display: inline-block;
width: 1000px;
padding:0px;
margin-top: 50px;
margin-right: 100px;
margin-left: 50px;
position: fixed;
border:2px solid black;
}
.text-header-content{
display: inline;
width: 400px;
float: right;
padding:0px;
margin-top: 0px;
}
.text-content{
display: inline;
width: 400px;
padding:0px;
color: black;
float: right;
margin-bottom: 0px;
padding-bottom: 0px;
}
3 个解决方案
解决方案1
1 已采纳 2013-09-08 15:25:02
解决方案2
0 2013-09-08 15:20:15
您将不得不将IMG浮动到左侧。 我要做的是将文本放在另一个元素内并设置overflow: hidden; 在那个元素上。
HTML：
<div class="content-wrapper">
<img class="hk-img" src="hksquared.jpg" height= "400px" width="400px">
<div class="text">
<h1 class="text-header-content">Web Development. Software Development. E-commerce. Photograpy.</h1>
<p class="text-content">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum.<br><br><br>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
</div>
CSS：
.content-wrapper {
/* Simple float containment: http://colinaarts.com/articles/float-containment/ */
overflow: hidden;
/* Your styles */
display: inline-block;
width: 1000px;
margin: 50px 100px 0 50px;
border: 2px solid black; }
.content-wrapper > .hk-img {
float: left;
/* Adjust following margin to taste */
margin-right: 2em; }
.content-wrapper > .text {
/* The following line prevents the text from wrapping under the image,
creating a column effect. */
overflow: hidden;
color: black; }
.content-wrapper > .text .text-header-content {
margin-top: 0; }
解决方案3
0 2013-09-08 15:22:23
问题：
这是因为，您的一个div设置为float: right; 另一个设置为float: left 。 这将始终导致此问题。
解：
您可以使用
float: right属性为div设置一些margin-right，以便它更接近一点。 但是，您可以尝试给带float: left边距float: left一些余量float: left也可以。 这样，两者将彼此靠近。您从div中删除了
float: right属性。 为此，您需要尝试以下操作：img {
向左飘浮;
}img，p，h1 {
显示：inline-block;
}
此方法不需要设置任何边距值即可。 相反，它甚至不会使文本向右浮动，而只会将其显示在图像的前面。 没有那个空白。 另外，您仍然可以尝试提供一些空白以使其看起来很可爱！
如何删除视差背景图像和下一个div之间的空白？
[英]How to remove white space between paralax backgrond-image and a next div?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.