标签: css-float

如何在twitter bootstrap元素后创建换行符？

我道歉,因为这看起来很简单.

以下一个元素在换行符上的方式插入换行符的正确方法是什么？似乎有些东西会自动执行此操作(例如<p>在`内),但我看到下一个元素可以出现在最后一个元素旁边的行为.

HTML:

<ul class="nav nav-tabs span2">
    <li><a href="./index.html"><i class="icon-black icon-music"></i></a></li>
    <li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li>
    <li><a href="./team.html"><i class="icon-black icon-user"></i></a></li>
    <li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li>
</ul>
<BR /> <!-- It seems dumb to need this!  Is this really how -->
<BR /> <!-- to get a newline? -->
<BR /> <!-- Well, it's what -->
<BR /> <!-- I'm doing now, I suppose... -->
<BR />

<div class="well span6">
    <h3>I wish this appeared on the next line without having to …

Run Code Online (Sandbox Code Playgroud)

html html-lists css-float clearfix twitter-bootstrap

Dan*_*nny

2015 12-25

33
推荐指数

3
解决办法

9万
查看次数

CSS - span标签上的宽度不受尊重

我的一个跨度问题.请考虑以下样式:

.form_container .col1che
{
float: left; 
width: 4%; 
text-align: left;    
}

.form_container .col2che
{
float: left; 
width: 80%; 
text-align:left;
}

.form_container .col3che
{
float: right; 
width: 13%; 
text-align:right;
}

Run Code Online (Sandbox Code Playgroud)

这三个跨度在我的代码中:

<div class="row"><!-- start: "row" -->
     <span class="col1che">        
          <?php  //some db feeds    ?>        
     </span>
     <span class="col2che">
          <?php  //some db feeds    ?>
     </span>
     <span class="col3che">
          <?php  //some db feeds    ?>
     </span>
     <div class="clear"></div>
</div><!-- end: "row" -->

Run Code Online (Sandbox Code Playgroud)

当没有数据显示在"COL1CHE"中时(或者甚至可能在其中任何一个中虽然我不确定),当没有数据时,如果此跨度"折叠"并且其宽度未被遵守,则会出现此问题.这种情况发生在Firefox中,在IE中它不会"崩溃".

我包括一个"清晰"的课程,看看这是否有帮助,但无济于事.

有任何想法吗？

html css css-float

chi*_*ane

2018 08-26

32
推荐指数

3
解决办法

5万
查看次数

向左和向右浮动

这个问题困扰了我一段时间.所以我创建了一些关于我的问题的视觉描述

首先是我的HTML结构我有6个div ..前3个浮点数左边,最后3个浮点数右边.最后一张图片显示了我想要的结果,但似乎无法获得.有人可以帮助我吗？

编辑//抱歉,我的HTML和CSS

<style>
    .left { float:left; }
    .right { float:right; }
</style>
<div id="container">
   <div class="left"></div>
   <div class="left"></div>
   <div class="left"></div>
   <div class="right"></div>
   <div class="right"></div>
   <div class="right"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

注意:我不能左右做左右选项,因为我从PHP通过查询到我的数据库获取我的数据..第一个查询左边第二个查询正确....感谢一堆

/编辑

这是我的HTML结构的mocukup

我的花车导致了这个

这是我目前的结果

这就是我要的

我要这个

css css-float

Old*_*org

2012 06-12

32
推荐指数

3
解决办法

3万
查看次数

包含浮动<li>时的<ul>高度

我有一个清单:

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
 ...
</ul>

Run Code Online (Sandbox Code Playgroud)

所有的<li>都是浮动的.我需要<ul>盒子的高度.如果我没记错,这是无效的:

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
 ...
 <hr class="clear" />
</ul>

.clear {
   clear: both;
}

Run Code Online (Sandbox Code Playgroud)

我怎样才能做到这一点？列表中的项目数可能不同,因此我无法使用固定高度.

html css html-lists css-float

tsu*_*nka

2014 06-10

31
推荐指数

1
解决办法

4万
查看次数

Bootstrap 3:在list-group-item中浮动的span元素不会消耗垂直空间

在Bootstrap 3中list-group-item,我有一个图标,一些文本和两个应该向右浮动的图标/按钮.

我试过这个:

<a class="list-group-item" ng-click="handleClick()">
    <span class="glyphicon glyphicon-file"></span> 
    Some text goes here
    <button class="btn btn-xs btn-warning pull-right" ng-click="handleButtonClick()"><span class="glyphicon glyphicon-trash"></span></button>
    <some:custom:span></some:custom:span> 
</a>

Run Code Online (Sandbox Code Playgroud)

如果结果适合一行,则效果很好:

用宽窗口渲染

当窗口太薄以至于实际文本不适合一行时,它也可以工作:

文字被包裹,留下一个右拉跨度的地方

但是,如果窗口允许文本保持在一行中,但是没有足够的空间用于右向跨度,则事情会搞砸:

漂浮在下面

我真正想要的是pull-right跨度开始一条新线并对齐,并list-group-item垂直延伸以适合它们.我怎样才能做到这一点？

css html5 css-float twitter-bootstrap-3

fef*_*rei

lucky-day

31
推荐指数

1
解决办法

7万
查看次数

CSS重叠浮动

我正在尝试为我正在处理的页面设置一个简单的水平制表符结构,而且我遇到浮动div与z-index相结合的问题.

在浏览器中查看以下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
        #main { width: 500px; z-index: 1;}

        .left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 2; margin-right: -2px }
        .right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; }

        .clear { clear: both; }
</style>
</head>

<body>
    <div id="main">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
            <br />
            RIGHT …

Run Code Online (Sandbox Code Playgroud)

css z-index css-float

Mic*_*ael

2018 01-02

30
推荐指数

2
解决办法

5万
查看次数

如何做一个没有包装的`float:left`？

我有一个box1具有一定宽度的容器(可能会根据其内容而改变).该框包含box2具有固定宽度的框(可以是图标).旁边box2,我有box3一些文字.我希望文本使用右侧可用的所有空间box2.使用下面粘贴的HTML,您会得到:

简短的文字

到现在为止还挺好.如果文本变得更长,它不会环绕box2(这是我想要的),但是,它不会使box1成长,这是我的问题.你会告诉我"嘿,如果你做box3了position: absolute,你怎么能指望它box1成长？".好吧,我不是然后,我怎么能box3在旁边显示box2,使用所有可用的水平空间,并box1在必要时进行增长？(我是否需要说我喜欢IE6上的这项工作,并避免使用表？)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            #box1 { position: relative }
            #box3 { position: absolute; left: 2.5em; right: .5em; top: .5em }

            /* Styling */
            #box1 { background: #ddd; padding: 1em 0.5em; width: 20em }
            #box2 { background: …

Run Code Online (Sandbox Code Playgroud)

css css-position css-float

ave*_*net

lucky-day

29
推荐指数

1
解决办法

3万
查看次数

浮动页脚总是在底部并且可见

我有一个像这样的网站:>>网站<<.它由2个框架构成 - 主要和页脚.我试图让它在没有框架的情况下工作(不要在手机上工作).是否有任何简单的CSS或jQuery方法将页脚粘贴在底部以便始终可见？所以效果就像上面的网站？我试图使用CSS,但只有当我向下滚动时,页脚才出现.我希望页脚覆盖实际内容,因此它总是例如50像素高,并始终在屏幕底部可见.即使页面高10000px.我相信这很简单,但我在那里迷路了.提前谢谢你的帮助

footer sticky-footer css-float

Pio*_*ski

lucky-day

29
推荐指数

1
解决办法

8万
查看次数

Google Chrome中的CSS浮动Bug

我在最新版本的Chrome(25.0.1364.97米)中遇到了一个奇怪的问题.我在一个浮动的,清理过的容器内有一组div,所有的浮动都留有相同的宽度.

在Firefox,IE和旧版本的Chrome中,所有的盒子都应该并排放置,但在最新版本的Chrome中,第一个div高于其他版本,如下所示:

在此输入图像描述

它似乎只发生在窗口最大化并且在第一次加载时,如果我刷新页面它会自行排序,但如果我用Ctrl + F5进行硬刷新,它会再次发生

HTML:

<div id="top">
    <h1>Words</h1>
</div>
<div id="wrapper">
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS:

#wrapper {clear:both;float:left;margin-top:20px;width:500px}
.box {float:left;width:100px;border:1px solid #000;margin-right:20px}

Run Code Online (Sandbox Code Playgroud)

我在这里做了一个小提琴:http://jsfiddle.net/GZHWR/3/

这是最新Chrome中的错误吗？

编辑:我知道这可以通过将填充应用于#wrapper元素而不是margin-top来解决,但是我们管理了大约140个站点,因此在每个站点上更改CSS是不实际的

编辑2:我想我需要澄清我的问题.我不是问如何解决这个问题.我已经知道了.我想知道为什么会出现这种情况？为什么渲染引擎会像这样呈现标记/ css？这是正确的行为吗？

css google-chrome css-float

And*_*ndy

2015 07-30

29
推荐指数

2
解决办法

3万
查看次数

Internet Explorer 6和7:当浮动元素包含向右浮动的子元素时,浮动元素将扩展为100%宽度.有解决方法吗？

我有一个父母div漂浮在左边,有两个孩子div,我需要向右漂浮.

父母div应该(如果我理解正确的规范)与包含孩子div的需要一样宽,这就是它在Firefox等人的表现.

在IE中,父级div扩展到100%宽度.这似乎是浮动元素的问题,这些元素可以让子项正确浮动.测试页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Float test</title>
</head>

<body>
<div style="border-top:solid 10px #0c0;float:left;">
    <div style="border-top:solid 10px #00c;float:right;">Tester 1</div>
    <div style="border-top:solid 10px #c0c;float:right;">Tester 2</div>
</div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

不幸的是我无法修复子divs 的宽度,因此我无法在父级上设置固定宽度.

是否有一个仅限CSS的解决方法,使父母div像孩子一样宽div？

css internet-explorer css-float

Pau*_*ite

2012 05-10

28
推荐指数

2
解决办法

2万
查看次数