相关疑难解决方法(0)

我有一个布局,我有3列.

因此,我将100%除以3.

结果显然是33.333 ....

我的目标是完美的1/3屏幕.

题:

点后面有多少个数字可以用CSS来指定1/3的宽度？

例如33.33333 (n=5)←有多少ncss可以处理

HTML:

<div id="wrapper">
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
</div>

CSS:

#c1, #c2, #c3 {
    width: 33%; // 1/3 of 100%
}

是否有更好的方法除以3？

我尝试使用百分比作为宽度来构建流体布局.这样做我试过这个:

<div style="width:50%; display:inline-table;">A</div>
<div style="width:50%; display:inline-table;">B</div>

在这种情况下,他们不会站在一行,但如果我删除它们之间的换行符,像这样:

    <div style="width:50%; display:inline-table;">A</div><div style="width:50%;   display:inline-table;">B</div>

然后它工作正常.问题出在哪儿？我怎么能这样做,但没有使用绝对位置和浮动.

抱歉英语.我希望我能很好地解释我的问题

我有一堆相同大小的块设置display:inline-block在div内部,text-align:center设置为对齐块.

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  1  | |  2  | |  3  | |  4  |      |
|       |_____| |_____| |_____| |_____|      |
|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  5  | |  6  | |  7  | |  8  |      |
|       |_____| |_____| |_____| |_____|      |
|                                            |

这些块水平填充div,随着浏览器窗口缩小,一些块会断开到新行,从而创建更多行和更少列.我希望所有内容仍然保持居中,最后一行与左边齐平,如下所示: …

我有一个(水平)居中的外部div包含两个未知宽度的元素:

<div style='width:800px; margin:0 auto'>
  <div style='float:left'>...</div>
  <div style='float:right'>...</div>
</div>

默认情况下,两个浮动都是顶部对齐的,并且具有不同/未知和不同的高度.有没有办法让它们垂直居中？

我最终做了外部div

display: table

和内在的div

display: table-cell;
vertical-align: middle;
text-align: left/right;

但我很好奇是否有办法用花车来做这件事.

我的应用程序中有以下结构:

<div id="container">
  <div id="child_container">
    <div class="child"></div>
    <div class="child"></div>
    ...
    <div class="child"></div>
  </div>
</div>

每个子div具有已知的固定宽度,但应用程序允许将更多的子插入child_container div中.

我想要做的是在给定子容器的总宽度时,在需要时让容器div水平扩展.

这是目前发生的事情:

+------ container -------+
+--- child_container ----+
| child1 child2 child3   |
| child4                 |
+------------------------+

如果我将child_container div宽度设置为固定值,我可以让它在容器div之外水平扩展,尽管有点丑陋:

+------ container -------+
+------ child_container -+----+
| child1 child2 child3 child4 |
+------------------------+----+

但是,这需要在添加新子项时重新计算它.

有没有办法在不使用固定宽度的情况下为子容器执行此操作,以最终结果为止

+--------- container ---------+
+------ child_container ------+
| child1 child2 child3 child4 |
+-----------------------------+

谢谢.

内联块在它们之间有这个奇怪的空间.我可以忍受它,直到某一点,如果我用AJAX调用加载更多内容,那么微小的空间就会消失.我知道我在这里遗漏了一些东西.

div {
    width: 100px;
    height: auto;
    border: 1px solid red;
    outline: 1px solid blue;
    margin: 0;
    padding: 0; 
    display: inline-block;
}

http://jsfiddle.net/AWMMT/

如何使Inline块中的间距保持一致？

如何摆脱列表项之间的空白区域？我试图让图像紧挨着彼此.即使我已经设置了样式margins: 0;,它们仍然是分开的.

CSS

ul.frames{
  margin: 20px;
  width: 410px;
  height: 320px;
  background-color: grey;
  float: left;
  list-style-type: none;
}

ul.frames  li {
  display:inline;
  margin: 0;
  display: inline;
  list-style: none;
}

ul.frames li img {
  margin: 0 0 0 0;
}

HTML

<li>
  <img id="myImg" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg2" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg3" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg4" src="img.jpg" width="102.5px" height="80px"/>
</li>

我使用这个CSS格式化两列但我仍然在两个之间获得边距空间.我可以使用margin-left: -4px;或一些这样消除它.是否有更优雅的方式来做这个或CSS代码有什么问题？

div.col1{
  display: inline-block;
  min-height: 900px;
  height: 100%;
  width 300px;
  margin: 0px;
  background-color: #272727;
  overflow: hidden;
  border: 1px dotted red;
}

div.col2{
  display: inline-block;
  min-height: 900px;
  height: 100%;

  width: 620px;
  margin: 0px;

  vertical-align: top;
  border: 1px dotted red;
  overflow: hidden;
}

我有一个带有一堆图像标签的div,这是一个例子:

<div style="margin: 0; padding: 0; border: 0;">
    <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>

因为标签之间有空格,浏览器会在图像之间显示一些空格(Chrome决定4px).我如何告诉浏览器在图像之间没有任何空格,而不是将<和<直接放在一起？我知道除了浏览器决定使用的字母间距外,字母间距也适用,所以即使是负值也没用.基本上我会在他们的主页底部找到像Twitter这样的东西.我查看了他们的代码,他们正在使用无序列表.我可以这样做,但我想要技术解释为什么似乎没有办法消除这些图像之间的空白区域.

我有三个divs水平并排堆叠在一起,这些div设置为显示:inline-block.但是,我注意到即使使用某种CSS重置,它们之间也会产生4px的小距离？为什么会这样？有没有办法全局摆脱这种情况发生或我只需要将div移到左边-4px？