我在我的 html 网页中创建了两个 div，如下所示 -
<div style="float:left">image here</div>
<div style="float:right">small images and medium size text content here</div>
我打算做的是这两个 div 的左右对齐。但问题是每个 div 占容器宽度的一半，因此在左侧 div 的右侧和右侧 div 之前有一些空格，通常右侧 div 从容器宽度的中间开始。
我希望右侧的 div 内容正好在左侧 div 的右侧，没有空格，但它没有出现。所以谷歌大师还没有解决问题。
我采取的一种方法是从这两个 div 中删除浮动样式，并为图像提供 float:left 样式，并且图像出现在左侧和内容在右侧（右侧 div 内容）的情况很好，但问题是何时有大的内容，内容也从我不想要的右侧开始在图像下方。
【问题讨论】：
标签： javascript html css webpage
试试这个：
<div style="float:left">image here</div>
<div >small images and medium size text content here</div>
【讨论】：
检查 div 是否由于父标签而设置了边距或填充。如果确实通过为 div 标签指定以下样式来删除它
style="padding: 0px !important;"
或
style="margin: 0px !important;"
您还可以按百分比为 div 指定特定宽度，例如 style="width: 30%;"
在此之后，为两个 div 指定 float: left 样式，如您所愿。
【讨论】：
我的建议是设置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>
【讨论】：
<div>，您没有添加，必须是 602px+padding+margins。
当元素为floated 时，它会脱离正常的文档流，在您尝试float:left; 或float:right; 的方向上暂停。如果您使用的是块级元素，例如<div>，并且在您的<div> 之前还有另一个块级元素，那么您的floated 元素将照常执行，在块级元素之后创建一个换行符，即在您的<div> 之前。如果floated 元素在另一个元素中，则父元素中的内容（相对于正常的块级规则和内容元素的float）将包裹到您的float 的另一侧，而您@ 987654331@ed 将自身推向float 方向的父元素填充。所以，floating 尊重填充、边框和边距。此外，您应该知道height 不包括填充、边框或边距。您需要将它们考虑在内，直到 CSS3 的 box-sizing 变得普遍。您应该使用 CSS 而不是 HTML 样式属性。
【讨论】：
大概是这样的吧？
<!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>
【讨论】：
编辑了您的 JSfiddle：http://jsfiddle.net/mn9e3ytL/1/
您需要在文本之前关闭一个 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" >
【讨论】：