如何删除div中两个元素之间的空白（参见图片）？
[英]How to remove white space between two elements in my div (see image)?
问题描述
I have been trying to fit in 3 different elements inside a div and have ran into problems. 
我一直试图将3个不同的元素放入div并遇到问题。 I cannot seem to get rid of the huge white space between my header and the paragraph. 我似乎无法摆脱标题和段落之间的巨大空白。 I have used a document on margin and padding to solve this issue, although I have made some progress there is still some unsolved problems. 我使用了有关边距和填充的文档来解决此问题，尽管我已经取得了一些进展，但是仍然存在一些未解决的问题。
My attempt: 我的尝试：
<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: 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 个解决方案
解决方案2
0 2013-09-08 15:20:15
You will have to float the IMG to the left. 您将不得不将IMG浮动到左侧。 What I would do is put the text inside of another element and set overflow: hidden; 我要做的是将文本放在另一个元素内并设置overflow: hidden; on that element. 在那个元素上。
HTML: 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: 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
Issue: 问题：
It is because, your one div is set to float: right; 这是因为，您的一个div设置为float: right; and the other is set to float: left . 另一个设置为float: left 。 This will always cause this issue. 这将始终导致此问题。
Solution: 解：
Either you set some
margin-rightfor the div withfloat: rightproperty, so that it will come a bit closer.您可以使用float: right属性为div设置一些margin-right，以便它更接近一点。 But hey, you can try to give some margin to the one withfloat: lefttoo.但是，您可以尝试给带float: left边距float: left一些余量float: left也可以。 This way, both will come closer to each other.这样，两者将彼此靠近。 You remove the property
float: rightfrom the div.您从div中删除了float: right属性。 And for this you need to try this:为此，您需要尝试以下操作： img {
img {
float: left;向左飘浮;
}} img, p, h1 {
img，p，h1 {
display: inline-block;显示：inline-block;
}}
This method won't need any margin value to be set, to come closer. 此方法不需要设置任何边距值即可。 Instead it will not even make the text float right, it will just display it in the front of the image. 相反，它甚至不会使文本向右浮动，而只会将其显示在图像的前面。 Without that white-space. 没有那个空白。 Also, you can still try to provide some margins to make it look cute! 另外，您仍然可以尝试提供一些空白以使其看起来很可爱！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.