3

http://jsfiddle.net/D9gnP/110/

两列之间有一点差距。从哪里来的差距我什么都没设置？

这对这些元素的 display:inline-block 有什么影响吗？他们有内部保证金吗？

  <div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
      <div style="width:50px;height:100%;">
        <div class="fluid-column" style="height:80%; background-color:green;">
          <div style="background-color:#ff99cc; height:25%;">1</div>
          <div style="background-color:#ff33cc; height:50%;">2</div>
          <div style="background-color:#ff66cc; height:25%;">3</div>
        </div>
        <div class="fix-column" style="height:20%; background-color:violet">
          <div style="background-color: orange;height:50%;">Total</div>
          <div style="background-color: blue;height:50%;">Test</div>
        </div>
      </div>
    </div>

body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
div {
    text-align:center;
    text-indent:-0.5em;;
}
div span {
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0;
}
4

4 回答 4

1

由于元素是内联的，因此它们被视为内联，包括由于空白而产生的空格。

尝试删除元素之间的空白（包括新行）。

<div>Content</div><!-- this white space/new line causes the gap -->
<div>Content</div>

<div>Content</div><div>Content</div><!-- no new line/white space, no gap-->

您还可以将其添加到容器元素中进行调整：

word-spacing: 0;

或者你可以只使用浮动元素:)

看到这里，如果你只是删除空格按预期工作：http: //jsfiddle.net/D9gnP/121/

于 2013-06-17T10:58:11.730 回答
0

将此代码粘贴到您的 html 中：

<div id="wrapper" style="background-color:yellow;height:100%;">
    <div style="width:50px;height:100%;display:inline-block;">
        <div class="fluid-column" style="height:80%;background-color:green;">
            <div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
            <div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
            <div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>      
        <div class="fix-column" style="height:20%;background-color:violet">
            <div style="background-color:orange;height:50%;"> <span></span>Total</div>
            <div style="background-color:white;height:50%;"><span></span>Test</div>
        </div>
    </div><div style="width:50px;height:100%;display:inline-block;">
        <div class="fluid-column" style="height:80%;background-color:green;">
            <div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
            <div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
            <div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>      
        <div class="fix-column" style="height:20%;background-color:violet">
            <div style="background-color:orange;height:50%;"> <span></span>Total</div>
            <div style="background-color:white;height:50%;"><span></span>Test</div>
        </div>
    </div>
</div>

请注意，在 source code.ex 中，两个 div 之间没有任何内容：

<div>data</div><div>data</div>
于 2013-06-17T11:01:41.827 回答
0

我认为 HTML 标记中的空格 - 标签之间的缩进 - 会被浏览器解释。在设计水平导航带时，我曾经遇到过类似的问题。

不幸的是，除了完全不同的布局之外，我发现的唯一解决方案是编写没有任何空格的 HTML 标记，这会变得非常难看。

于 2013-06-17T10:56:05.063 回答
0

这是因为您的 HTML 中的空白。尝试删除两个列 div 之间的中断，它就消失了，或者试试这个解决方案：

如何删除行内块元素之间的空间？

于 2013-06-17T10:56:18.580 回答