标签: css-float

我正在尝试在网页上显示彼此相邻浮动的图像和一些文本，如下所示。

我基本上已经尝试了在这个主题上发现的前两个SO问题中建议的所有方法：

• 如何在不使用表格的情况下并排显示项目？
• HTML 代码将图像放在屏幕左侧，文本放在屏幕右侧，页脚在下面？

然而，无论我尝试什么组合，这都是我获得的结果：

这是HTML第一个示例的代码（似乎根本不起作用）：

<div class="cf">
    <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" width=100>
    <div>some text here</div>
</div>

这是HTML第二个示例的代码，其不同之处在于文本未包装到容器中<div>（但似乎仅适用于有限数量的文本）：

<div class="cf">
    <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" width=300>
    some text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text …

如何在CSS中将define float定义为中心？实际上我需要一个左右之间的布局,我也尝试"文本对齐",但它不起作用,"浮动"属性只是工作.

谢谢

好的,我已经在我正在处理的这个个人网站上收到了一些有用的信息.在我乱七八糟的嵌套div中,我为自己创造了一些问题.我把那个图像和它旁边的文本都放在另一个div里面并且以div为中心,这很好.但是为了在它下面开始一个新段落,我必须将该段落放在div中,因为需要清除它上面的浮点数(或者它在div旁边的右边距中显示文本).我确信有一种更简单的方法可以做我想做的事情.如果有人能够看看我的代码,看看我的结构错误,那将是一个很大的帮助......非常感谢.

正如你所看到的那样,标题"最近的工作"正在按照它应该的方式集中,但它没有从它上面的那个方框中获得通常的边距.

链接在这里:

http://danberinger.com/

.float1  {
float: left;
width: 50%;
height: 50%;
}
.float2  {
float: right;
width: 50%;
height: 50%;
}
.float3  {
float: left;
width: 50%;
height: 50%;
}
.float4  {
float: right;
width: 50%;
height: 50%;
}
.clear {
clear: both;
}


HTML:


<div class="float1">Float 1</div>
<div class="float2">Float 2</div>
<div class="clear"></div>
<div class="float3">Float 3</div>
<div class="float4">Float 4</div>
<div class="clear"></div>

我想要一个像这个图像的输出:

请更正我的css代码.谢谢.

假设您有一个项目列表,并将它们放在div中.该列表是动态生成的,项目数量未知.

CSS:
div#container {
    width:500px;
}
div.item {
  width:150px;
  float:left;
}

HTML:
<div id="container">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    .
    .
    .
</div>

浏览器输出如下:

项目1项目2项目3
项目4项目5项目6
......

如何创建垂直列,如:

项目1项目4
项目2项目5
项目3项目6
...

通常,我最终会做这样的事情:

<div class="one">
   <div class="floating-two">content</div>
   <div class="clear"></div>
</div>

我们通常的意思是,"确保任何浮动元素都包含在第一块中".可能是Sof,应用于"one"的任何背景都出现在所有内容之后,浮动或不浮动.

我正在寻找一种更清洁的方法来做到这一点.毕竟,"清晰"div只是我们打算应用于"一"的风格.我们可以这样做:

.floating-two:after{
  clear:both;
}

但这也不正确.浮动二不知道在"一"关闭之前是否可能有其他块跟随它.

有人为此开发了一个技巧吗？

可能重复:
html,css - 图片下方奇怪的隐形边距

我在浮动的div容器中有一个图像:

<div><img src="..." /></div>

然而,容器总是比它里面的图像高几个像素,这是相当丑陋的,你可以在这个小提琴中看到.当然,粉红色区域有点夸张,但它清楚地表明了问题.

有办法避免这种情况吗？即如果除了容器中的图像之外什么也没有,它应该在图像下方没有任何空白.填充和边距已经为零,因此不是导致问题的原因.

我目前有以下HTML:

<div class="clearfix">
   <div style="width:33%;float:left">content</div>
   <div style="width:33%;float:left">content</div>
   <div style="width:33%;float:left">content</div>
</div>

如果一行上有3个div,并且因为我为每个div指定了一个百分比宽度,它们都完全占据父宽度的宽度.我想要实现的是让浮动div自动调整它们的宽度(即没有硬编码百分比宽度),具体取决于线路上存在多少div.例如,如果有2个div,那么每个div将占据父级的整个宽度的一半(即50%).如果有3个div,那么33%.

浮动div有可能吗？如果没有,我可以用什么其他方法来实现这种类型的流体布局？我考虑让父母使用'table'显示,内部div为'table-cell'显示,但是父对象停止占用100%的可用宽度.

我希望六个百分比宽度的div沿着100%宽度的div均匀分布,填满整个100%的宽度,但它们之间的间距很小.

这是一个显示问题的JSFiddle:

http://jsfiddle.net/uQcGS/1/

或者在这里编码:

<div class="container">
    <div class="inner red">&nbsp;</div>
    <div class="inner orange">&nbsp;</div>
    <div class="inner yellow">&nbsp;</div>
    <div class="inner green">&nbsp;</div>
    <div class="inner blue">&nbsp;</div>
    <div class="inner purple">&nbsp;</div>
</div>
div { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}
.container { 
  width: 100%;
}
.inner { 
  width: 16%;  
  display: inline-block;
  margin: 1px;
} 

目前,保证金导致他们突破两条线.

我发现了类似问题的一些黑客,但我不知道如何将它们应用于我的具体问题.

我有一个main div可以有的one or two sub divs.当有两个子div时,我希望它们并排显示.但如果我只有一个子div,那么我希望它显示在中心.这可以通过使用CSS来实现,还是应该借助JavaScript？使用以下CSS我能够实现它的并排部分.但是,当只有一个子div时,我不确定如何前进

HTML:

<div id="maindiv">
    <div class="subdiv">
        <p>Div One</p>
    </div>

    <div class="subdiv">
        <p>Div Two</p>
    </div>
</div>

CSS:

div.subdiv {
    float: left;
    padding: 20px;
}

div#maindiv {
    border: 2px solid black; 
    height: 120px;
    width: 200px;
}