当前位置：文江博客话题详情

CSS 浮动 Div 问题

发布于 2024-12-05 04:57:52 字数 214 浏览 1 评论 0原文

好吧，我对 CSS 实在是一窍不通。但我需要这样做。

你可以在 http://www.eresig.tk 看到我的问题，我正在尝试使用“ Lorem ipsum”和“Testing4”处于同一高度。

我不想使用绝对位置，我想用浮动来做到这一点。编辑：我已经找到了我正在寻找的答案。

原文

分享到QQ

分享到微博

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

发布评论

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

霞映澄塘 2024-12-12 04:57:52

如果我正确理解你的问题，你希望测试 4 的 div 位于 Lorem ipsum 的 div 旁边。在这种情况下，您需要为您的 div 设置特定的宽度。只要您未指定宽度，它们将默认为 100%，并且测试 4 div 将低于另一个 div。

我也没有在您的 Lorem Ipsum div 上看到浮动。

回复收藏 0 原文

秋日私语 2024-12-12 04:57:52

我建议您阅读这篇文章：

流体宽度等高 CSS 列

回复收藏 0 原文

っ〆星空下的拥抱 2024-12-12 04:57:52

试试这个
css:

#loremipsum{
float: left;
width:50%;
background-color: yellow;
padding-bottom: 500px;
margin-bottom: -500px;
}


#testing4{
float: right;
width:50%;
background-color: red;
padding-bottom: 500px;
margin-bottom: -500px;
}

html:

<div style="overflow: hidden;">
  <div id="loremipsum"></div>
  <div id="testing4"></div>
</div>

try this
css:

#loremipsum{
float: left;
width:50%;
background-color: yellow;
padding-bottom: 500px;
margin-bottom: -500px;
}


#testing4{
float: right;
width:50%;
background-color: red;
padding-bottom: 500px;
margin-bottom: -500px;
}

html:

<div style="overflow: hidden;">
  <div id="loremipsum"></div>
  <div id="testing4"></div>
</div>

回复收藏 0 原文

不…忘初心 2024-12-12 04:57:52

如果我正确地回答了你的问题，

你的 CSS 应该看起来像

#container {width:100%; height:auto; overflow: hidden;}
#content-left {width:50%; float:left}
#content-right {width:50%; float:left}

HTML 标记

<div id="container">
   <div id="content-left"></div>
   <div id="content-right"></div>
</div>

完整的代码

<html>
<head>
<style>
#container {width:100%; height:auto}
#content-left {width:50%; float:left; height:50px; background-color:black}
#content-right {width:50%; float:left; height:50px; background-color:red}
</style>
</head>
<div id="container">
   <div id="content-left"></div>
   <div id="content-right"></div>
</div>

</html>

*注意：我添加了 height:50px;背景颜色：黑色 查看结果。当然，您可以删除此代码

这是示例
http://jsfiddle.net/QbLgu/

这是每个 Webdev 必须了解的基本知识。你需要学习基础知识。在提出有关 SO 的问题之前尝试进行研究

If I got your question correctly,

Your CSS should look like

#container {width:100%; height:auto; overflow: hidden;}
#content-left {width:50%; float:left}
#content-right {width:50%; float:left}

And HTML markup

<div id="container">
   <div id="content-left"></div>
   <div id="content-right"></div>
</div>

The full code

<html>
<head>
<style>
#container {width:100%; height:auto}
#content-left {width:50%; float:left; height:50px; background-color:black}
#content-right {width:50%; float:left; height:50px; background-color:red}
</style>
</head>
<div id="container">
   <div id="content-left"></div>
   <div id="content-right"></div>
</div>

</html>

*note: I've added height:50px; background-color:black to see the result. You can remove this code, of course

And here is the example
http://jsfiddle.net/QbLgu/

This is the basic things that every webdev MUST KNOW. You need to learn basics. Try to research, before asking question on SO

回复收藏 0 原文

~没有更多了~