Javascript 浮动html div的对齐问题_Javascript_Html_Css_Webpage

Javascript 浮动html div的对齐问题

javascript html css

Javascript 浮动html div的对齐问题,javascript,html,css,webpage,Javascript,Html,Css,Webpage,我在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之前有一些空

我在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样式，并为图像提供了

float:left

样式，图像显示在左侧，内容显示在右侧（右侧div内容），但问题是当有大内容时，内容也在图像下方，从右侧开始，这是我不想要的。

尝试以下方法：

<div style="float:left">image here</div>
<div >small images and medium size text content here</div>

这里的图像
这里有小型图像和中型文本内容

检查div是否由于父标记而设置了边距或填充。如果确实要删除它，请将下面的样式指定给div标记

style="padding: 0px !important;"

或

您还可以按百分比为div指定特定的宽度，如

style=“width:30%；”

在此之后，为两个div并排指定

float:left

样式。

可能是这样的吗

<!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>


html，正文{填充：0；边距：0；}
.clearfix:在{content:”；显示：表；清除：两者；}
.clearfix>div{box大小：边框框；边框：1px纯红；宽度：50%；垂直对齐：顶部}
十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏绿蒂十岁夏洛特十岁夏洛特十岁夏洛特十岁夏洛特十岁夏洛特十岁夏洛特十岁夏洛特

当一个元素处于

浮动状态时，它会脱离正常的文档流，在您试图浮动的方向上暂停自己浮动：左或<代码>浮动：右侧。如果您使用的是块级元素，如
，并且在
之前还有另一个块级元素，则浮动
ed元素将像往常一样，在
之前的块级元素之后创建一个换行符。如果一个float
ed元素位于另一个元素内，则父元素内的内容（相对于正常块级规则和内容元素的float
）将包装到float
的另一侧，而您所使用的float
ed会沿着float
的方向将自身推到父元素的填充上。因此，float
ing尊重填充、边框和边距。另外，您应该知道，高度
不包括填充、边框或边距。您需要将它们考虑在内，直到CSS3的框大小调整
变得普遍。您应该使用CSS而不是HTML样式属性。
我的建议是设置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>


这里有小型图像和中型文本内容
图像hereawef
图像hereawef
图像hereawef
图像hereawef
图像hereawef
图像hereawef
图像hereawef
图像hereawef
图像hereawef
图像hereawef
图像hereawef
图像hereawef
图像hereawef

编辑了您的JSFIDLE：
您需要在文本之前关闭一个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" >


如果删除边框样式，则可以删除框大小。这看起来很有效，但整个容器的宽度减少了一半！我的整个内容容器宽度是100%，在实现代码后，我看到整个内容宽度减少到50%，好的，伙计们，我创建了一个JSFIDLE，代码从一开始就是这样的，看起来不太好，哪里的格式不好？为什么不为img源设置一个在线图像url。尝试解决我想要的问题阅读此处的所有评论和答案是的，左侧分区的右侧没有空格，但正如我所说，从右侧分区开始，图像下方仍有大量文本内容。我将很快检查其他答案。请不要发布“尝试此”答案。他们没有解释问题是什么，也没有解释“这个”是如何解决的，所以他们在未来对任何人都没有帮助。我想他足够聪明，看到我从他的原始代码中删除了3个单词。容器
，你没有添加，必须是602px
+填充+边距。我没有给出结束的是什么？，无论如何，在第一个div下面放一个图像，然后看到文本。它看起来像我想的那样复杂，所以我尝试给这两个div指定%的宽度。@dev-m我只是不明白什么不起作用…：(
<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" >