浮动html div的对齐问题
[英]Alignment issue of floating html divs
问题描述
I created two divs in my html web page as follows - 
我在HTML网页中创建了两个div，如下所示：
<div style="float:left">image here</div>
<div style="float:right">small images and medium size text content here</div>
What I intend to do is left-right alignment of these two divs. 我打算做的是这两个div左右对齐。 But the problem is each div taking half the width of the container, as a result there are some spaces at right of left side div and before the right side div, as usually right side div started from the middle of the container width. 但是问题是每个div占用的是容器宽度的一半，结果是左侧div的右侧和右侧div之前有一些空间，通常右侧div从容器宽度的中间开始。
I want that right side div content will be just at the right of left div with no spaces, but it's not appearing. 我希望右侧div内容位于左div的右边，没有空格，但是没有出现。 So still problem is not solved by Google master yet. 所以问题仍然没有被谷歌大师解决。
A approach I took is I removed float styles from both of these divs and gave a float:left style to the image and things are good that image appearing at left and content at right (right side div content) but problem is when large content are there, content goes below the image too starting from right side which I don't want. 我采取的一种方法是，从这两个div中都删除了float样式，并为图像赋予了float:left样式，并且图像出现在左侧，内容出现在右侧（右侧div内容）是一件好事，但是问题是当内容较大时在那儿，内容也从我不想要的右侧开始在图像下方。
6 个解决方案
解决方案1
0 2014-10-06 00:47:09
Try this: 尝试这个：
<div style="float:left">image here</div>
<div >small images and medium size text content here</div>
解决方案2
0 2014-10-06 00:50:33
Check if the div's have a margin or padding already set due to a parent tag. 检查div是否由于父标记而设置了边距或填充。 If it does remove it by specifying the below style to the div tag 如果确实通过将以下样式指定给div标签将其删除
style="padding: 0px !important;"
OR 要么
style="margin: 0px !important;"
You can also give specific width to the divs in percentage like style="width: 30%;" 您还可以按百分比为div指定特定宽度，例如style="width: 30%;"
After this specify the float: left style for both the divs as you want them side by side. 在此之后，请为两个div并排指定float: left样式。
解决方案3
0 2014-10-06 00:50:51
Something like this perhaps? 大概是这样吗？
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html, body { padding: 0; margin: 0; }
.clearfix:after { content:""; display:table; clear:both; }
.clearfix > div { box-sizing: border-box; border: 1px solid red; width: 50%; vertical-align:top }
</style>
</head>
<body>
<div>
<div class="wall-data clearfix">
<div style="float:left;">
<a href="http://facebook.com" target="_blank" class="wall-media-link">
<img class="wall-picture" src="http://localhost/joomla_ext/modules/mod_mymodule/tmpl/images/picture.jpg" /></a>
</div>
<div style="float:right">
<a href="https://www.facebook.com/" target="_blank" >
<img class="wall-avatar" src="http://localhost/joomla_ext/modules/mod_mymodule/tmpl/images/profile.png" /> </a>
<a href="https://www.facebook.com/" class="wall-message-from" target="_blank">Name Here</a>
<div>Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old Charlotte Ten-year-old CharlotteTen-year-old Charlotte Ten-year-old CharlotteTen-year-old Charlotte </div>
</div>
</div>
</div>
</body>
</html>
解决方案4
0 2014-10-06 02:14:03
When an Element is float ed, it goes out of the normal document flow, suspending itself in the direction you're trying to float:left; 当Element float ，它会脱离正常的文档流，将其自身悬浮在您尝试float:left;的方向上float:left; or float:right; 或float:right; . 。 If you are using a block level Element, like a <div> and there is another block level Element before your <div> , then your float ed Element will do as usual, creating a line break after the block level Element which is before your <div> . 如果您使用的是块级元素，如<div>和之前存在另一个块级元素的<div>那么你的float编元素会做像往常一样，在创建块级元素，它之前之后的换行符您<div> 。 If a float ed Element is within another Element, the content (with respect to normal block level rules and the content Elements' float ) within the Parent Element wraps to the opposite side of your float , while what you float ed pushes itself all the way against the Parent Element's padding in the direction of the float . 如果float编元素是另一个元素的含量（相对于正常的块级规则和内容元素内float ）的父元素包装到你的对面内float ，而你什么float编推动本身一路沿float方向与父元素的填充相对。 So, float ing respects padding, borders, and margins. 因此， float填充，边框和边距。 Also, you should know that height does not include padding, borders, or margins. 另外，您应该知道height不包括填充，边框或边距。 You need to factor them in until CSS3's box-sizing becomes widespread. 您需要考虑它们，直到CSS3的box-sizing变得广泛为止。 You should use CSS instead of the HTML style attribute. 您应该使用CSS而不是HTML样式属性。
解决方案5
0 2014-10-06 02:15:56
my suggestion is to set div height.If the height is same,it won't go down to left side div. 我的建议是设置div高度。如果高度相同，则不会下降到左侧div。
<html>
<div style="float:left;border:1px solid black;height:300px">small images and medium size text content here</div>
<div style="border:1px solid black;height:300px">image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/>image hereawef<br/></div>
</html>
解决方案6
0 2014-10-06 21:38:34
Edited your JSfiddle: http://jsfiddle.net/mn9e3ytL/1/ 编辑了JSfiddle： http ： //jsfiddle.net/mn9e3ytL/1/
You needed to close a div before the text. 您需要在文本前关闭div。
<img class="wall-picture" src="http://localhost/joomla_ext/modules/mod_mymodule/tmpl/images/picture.jpg" /> </a>
</DIV>
<div style="float:right">
<a href="https://www.facebook.com/" target="_blank" >
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.