标签: css-float

我有一个小问题.我试图使用CSS并排对齐两个div,但是,我希望中心div位于页面的水平中心,我通过使用:

#page-wrap { margin 0 auto; }

这很好用.我希望第二个div位于中央页面包装的左侧,但我无法使用浮动设置这样做,尽管我确信这是可能的.

我想把红色的div放在白色div旁边.

这是我目前关于这两个div的CSS,侧栏是红色div,页面换行是白色div:

#sidebar {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap {
    margin: 0 auto;
    width: 600px;
    background: #ffffff;
    height: 400px;
}

我已经在当前的bootstrap 3上遇到了这样的问题一段时间了.我已经成功地以某种方式解决了这些问题,但是这次不知道如何修复它们.

我需要ul通过交替使用pull-left&pull-right列表项来创建一列中的两列.我究竟做错了什么？

http://bootply.com/92446

我必须在CSS中实现以下循环和行组合,我正在寻找有关如何有效实现它的指针.圆圈和线条应如下所示:

我可以这样实现圈子:

span.step {
  background: #ccc;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #1f79cd;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em; 
}

但这些线条对我来说很难理解.

圆的大小根据是否为活动步而改变,连接圆的线的颜色也根据状态而改变.我怎么做到这一点？

我环顾四周SO,但找不到与我的匹配相匹配的一个,我基本上有两列固定宽度(185px),另一列没有固定宽度,但我需要最后一列填充最后一个空格,例如

...........................................
.---------  ------------------------------.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  ------------------------------.
.+       +                                .
.+       +                                .
.+       +                                .
.---------                                .
...........................................

当第二列填充剩余宽度时,第一列应该总是100%到底部,它们都是浮动的left,如果我调整浏览器窗口的大小,第二列显示在第一列下面.我需要第二列来填充剩余的宽度,并在调整浏览器窗口大小时保持灵活性.

我有一个高度和宽度固定的容器DIV(275x1000px).在这个DIV中,我想放置多个浮动DIV,每个DIV的宽度为300px,并且有一个水平(x轴)滚动条,允许用户左右滚动查看所有内容.

到目前为止这是我的CSS:

div#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}

div#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

问题是浮动DIV不会继续超过容器的宽度.在放置三个浮动DIV后,它们将继续在下方.如果我将overflow-y更改为auto,则会出现垂直滚动条,我可以向下滚动.

如何更改此设置以使浮动DIV继续运行而不会相互低于？

我想知道当父div和相邻div没有足够的空间时,是否有任何方法确实在浮动div增益省略号中有文本.例如:

<style>
.parent-div {
    width: 100%;
    border: 1px;
    padding: 4px;
}
.text-div {
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
.icon-div {
    float: left;
}
</style>
<div class="parent-div">
  <div class="text-div">This is text I'd like to truncate when space doesn't permit</div>
  <div class="icon-div">X</div>
</div>

到目前为止,如果我关闭浏览器窗口,父div将崩溃,然后text-div中的空格将消失,但是当没有更多空间时,省略号永远不会启动.

我唯一能想到的就是在窗口调整大小并在text-div上动态设置一个新的固定宽度时触发一个事件,但这只是感觉不够优雅,特别是考虑到填充和其他相邻的工件我不得不减去适当的宽度.

对这个有什么想法吗？

这是一个jsFiddle演示:http://jsfiddle.net/Blender/kXMz7/

对于每个邮箱,我希望缩略图向左浮动,文本向右浮动.我不希望拇指环绕文本.

这是我的HTML代码:

<div class="post-container">                
   <div class="post-thumb"><img src="thumb.jpg" /></div>
   <div class="post-title">Post title</div>
   <div class="post-content"><p>post description description description etc etc etc</p></div>
</div>

我已经尝试了几种方法但仍然无法使其工作......文本将不会显示在右侧...

这是我的CSS代码:

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
    clear:left;
}

.post-content {
    float:right;
}

我正在使用引导程序导航栏,但我想将其中一个按钮向右浮动而不是向左浮动.这是HTML:

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact" class="navbar-nav pull-right">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

我已经尝试使用nav navbar-nav navbar-right,float:right和pull-right.我真的不知道还能做些什么.任何帮助表示赞赏.

的jsfiddle

我写了下面的HTML试图将两个div放在彼此旁边.

<div id='wrapper' style='text-align:center;'>
    <div style='float:left;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
    <div style='float:left;'>
    Lorem ipsum<br />
    dolor sit amet
    </div>
</div>

但是,我写的代码会导致两个div一直向左浮动.这样做的正确方法是将两个div并排浮动.

我需要改变什么才能将两个div并排？

我的目标是<div>并排显示两个s,两个内容<div>在顶部对齐.我不希望在第二个文本中包含长文本<div>.

最后,我不想设置第二个的宽度,<div>因为我需要标记以不同的宽度工作.

示例标记位于http://jsfiddle.net/rhEyM/下方.

CSS

.left-div {
    float: left;
    width: 100px;
    height: 20px;
    margin-right: 8px;
    background-color: linen;
}
.right-div {
    float: left;
    margin-left: 108px;
    background-color: skyblue;
}?

HTML

<div class="left-div">
    &nbsp;
</div>
<div class="right-div">
    My requirements are <b>[A]</b> Content in the two divs should line
    up at the top, <b>[B]</b> Long text in right-div should not wrap
    underneath left-div, and <b>[C]</b> I do not want to specify a
    width of right-div. …