CSS 向左浮动不起作用

发布于 2024-12-11 17:58:19 字数 1034 浏览 0 评论 0原文

我试图将两个 div 分成左右两部分。左侧是静态的（300px 高度），右侧是非静态的（例如帖子和评论）。底部有页脚。

<div>
    <div>
    <div class="right"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div>
    </div>
    <div>
    <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div>
    </div>

我将主 div 的宽度设置为 760px，因此通过这些设置，我还有 10px 的空闲空间。现在的问题是，我无法将 float-right 分配给具有右类的 div，而只能将 float-left 分配给具有左类的 div。我尝试上下更改 div，重新分配位置，但我得到的不是我想要的。有什么帮助吗？

编辑

CSS
.right {
font-family: verdana;
font-size: 12px;
border-radius: 3px;
}

.left {
font-family: verdana;
font-size: 10px;
color: #000000;
border-radius: 3px;
}

这是我得到的结果，但我不想要在此处输入图像描述

在此处输入图像描述

我想要的是在此处输入图像描述

原文

i'm trying to split two divs into two section, left and right. With the left one being static (300px height) and right one is not static (such as posts and comments). With a footer at the bottom.

<div>
    <div>
    <div class="right"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div>
    </div>
    <div>
    <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div>
    </div>

I made my main div with a width of 760px, hence with those setting, i still have 10px to spare. The problem now is, i cannot assign float-right to the div with right class, and can only assign float-left to the div with left class. I tried changing the div up and down, reassigning the positions, but what i get isn't what i want. Any help?

edit

CSS
.right {
font-family: verdana;
font-size: 12px;
border-radius: 3px;
}

.left {
font-family: verdana;
font-size: 10px;
color: #000000;
border-radius: 3px;
}

This is the results i get which i don't want
enter image description here

enter image description here

what i want is
enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

相思碎 2024-12-18 17:58:19

DIV 是一个块元素，因此您可以将 float 或 inline-block 赋予 right div 以获取其实际值width 像这样：

.right{float:right}

编辑：

回答下面的评论

，如果您将 float 给 div 那么您必须清除其父级像这样：

<div style="overflow:hidden"> 
    <div class="right" style="float: right;"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div> 
    <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div> 
</div>

DIV is a block element so you can give float or inline-block to your right div to take its actual width like this:

.right{float:right}

EDIT:

answer your comment below

if you give float to the divs then you have to clear its parent like this :

<div style="overflow:hidden"> 
    <div class="right" style="float: right;"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div> 
    <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div> 
</div>

回复收藏 0 原文

笑梦风尘 2024-12-18 17:58:19

您需要删除一些 div 或将浮动分配给右、左 div 的父 div。

<div> 
    <div class="right" style="float: right;"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div> 
    <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div> 
    <div class="footer" style="clear: both;"><img src="images/members/ava/crays.jpg" style="width:760px; height:80px;" /></div> 
</div>

这应该有效。

you need to get rid of some divs or assign floating to parent divs of right, left divs.

<div> 
    <div class="right" style="float: right;"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div> 
    <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div> 
    <div class="footer" style="clear: both;"><img src="images/members/ava/crays.jpg" style="width:760px; height:80px;" /></div> 
</div>

this should work.

回复收藏 0 原文