相关疑难解决方法(0)

我有一个简单的flex-box布局,其容器如下:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

现在我希望最后一行中的项目与另一行对齐.justify-content: space-between;应该使用,因为可以调整网格的宽度和高度.

目前它看起来像

在这里,我希望右下角的项目位于"中间列"中.实现这一目标的最简单方法是什么？这是一个显示此行为的小jsfiddle.

.exposegrid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div> …

我有这个CSS代码inline-block.任何人都可以告诉我如何使它在Internet Explorer 6和7中工作.任何想法？也许我做错了什么？谢谢!

#signup {
   color:#FFF;
   border-bottom:solid 1px #444;
   text-transform:uppercase;
   text-align:center;
}
#signup #left {
   display: inline-block
}
#signup #right {
   background-image:url(images/signup.jpg);
   border-left: solid 1px #000;
   border-right: solid 1px #000;
   display: inline-block; 
   padding:1% 2%
   width:16%;
}
#signup #right a { font-size:100%; font-weight:bold } 
#signup #right p { font-size:90%; font-weight:bold }
#signup a:hover  { color:#FFF; text-decoration:underline }

还有一些其他问题已经解决了如何最好地应用text-align: justify以使内联块元素均匀分布...例如,我如何*真正*证明HTML + CSS中的水平菜单？

但是,"清除"内联块元素行的100%宽度元素由浏览器给出了自己的行.我无法弄清楚如何在不使用line-height: 0;父元素的情况下摆脱那个空的垂直空间.

有关问题的示例,请参阅此小提琴

对于我使用的解决方案line-height: 0;,请看这个小提琴

我正在使用的解决方案要求将新line-height元素应用于子元素,但任何先前设置line-height都将丢失.有人知道更好的解决方案吗？我想避免表格,以便元素可以在必要时包装,还有flexbox,因为浏览器支持还没有.我也想避免浮动,因为间隔开的元素数量是任意的.

我有一个固定宽度的div,但div内的文本可以改变.

是否有一种方法用css或其他方式设置字母之间的间距,以便文本总是完美地填充div？

更新和摘要

我觉得有义务让这个问题更清楚,因为现在有一个赏金.

(另外,我很确定当calc()支持CSS3单元值时,这将是孩子的游戏,做类似的事情width: calc(25% - 5px);虽然我们可能会在那时在我们的脑海中浏览互联网)

我正在为一些共享设计要求的项目开发一个CSS框架; 即流体12列布局.使用.column百分比宽度为的浮动元素(100% / 12) x col_size,这相当容易.但是,问题在于在列之间添加固定边距(或任何形式的间距).

我最初的尝试使用了所描述的流体柱.panel,每个都嵌套了一个子.下面是HTML/CSS代码段(为简洁起见):

.column{
    float: left;
    display: inline-block;
}

.width-01{ width:  8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width:      25%; }
/* etc */

.panel{
    width: 100%;
    padding: 5px;
    box-sizing: border-box; /* so padding doesn't increase width */
}

<div class="column width-02">
    <div class="panel">Width-02</div>
</div>
<div class="column width-03">
    <div class="panel">Width-03</div>
</div>
<div class="column width-02"> …

对于我的网站的主导航,有一个980px宽的div,主要导航链接为ul.我试图使导航链接拉伸以均匀地适合div的宽度.

<div style="width: 980px;">
<ul id="horizontal-style">
  <li><a href="#">Nav Item</a></li>
  <li><a href="#">Short Item</a></li>
  <li><a href="#">Really Long Nav Item</a></li>
  <li><a href="#">Nav Link</a></li>
  <li><a href="#">Another Link</a></li>
</ul>
</div>

我正在做一些典型的css来横向创建ul列表(float:left,display:block).我可以调整li的填充以使其非常接近,但我真正需要的是一种使其拉伸以适应自动的方法.可能？

编辑 难度1:无法使用表格.难度2:每个导航项目的宽度不同,以适应更长和更短的链接名称.

我很难找到我的案例的具体信息.我想在940px div上分发3个图像缩略图,以便与我的其他内容对齐.到目前为止,我已经让图像水平排列,但间距已经关闭,一切都向左移动.

这是我的CSS:

#thumbs {   
  width: 940px;
  margin-top:90px;
  margin-left: auto; 
  margin-right: auto;
}

我的HTML:

<div id="thumbs">
  <a id="single_image" href="/dev/images/1.png">
    <img src="/dev/images/thumb1.png" alt=""/>
  </a>
  <a id="single_image" href="/dev/images/2.png">
    <img src="/dev/images/thumb2.png" alt=""/>
  </a>
  <a id="single_image" href="/dev/images/3.png">
    <img src="/dev/images/thumb3.png" alt=""/>
  </a>
</div>

示例图像

我目前拥有的:

我想要实现的目标:

非常感谢您的帮助.

使用ng-repeat与span元素添加所有span元件一起的w/o在它们之间的空间从而使其成为一个牢不可破线,其不换行:

码:

<span ng-repeat="label in labels">{{label}}</span> 

渲染html:

<span>label1</span><span>label 2</span><span>label3</span><span>label 3</span><span>label5</span><span>label 4</span>

这不会包含在一个狭窄的div中.

问题:如何包装？

http://jsfiddle.net/supercobra/6e8Bn/

我有一个容器宽度为100%的页面,所以它的屏幕的整个宽度,我有几个网格结构的DIV,它们都有浮动:左边没有设置宽度,只有10px的边距.

是否有一种方法,使用CSS或jQuery,让div填充整个宽度并证明自己适合间隙,因此边距会根据屏幕大小而变化.

我有两个<div>:左和内容.这两个是内部包装 div min-width:960px;.left有固定的宽度,但是我希望内容灵活,最小宽度为700px,如果屏幕较宽,请将其粘贴到屏幕的右边界.

CSS:

#wrapper
{
    min-width:960px;
    margin-left:auto;
    margin-right:auto;
}
#left
{
    width:200px;
    float:left;
    background-color:antiquewhite;
    margin-left:10px;
}
#content
{
    min-width:700px;
    margin-left:10px;
    width:auto;
    float:left;
    background-color:AppWorkspace;
}

JSFiddle:http://jsfiddle.net/Zvt2j/