相关疑难解决方法(0)

以下是我的代码,我想了解为什么 #firstDiv被所有浏览器推倒.我真的想要理解这样一个事实的内在运作,即它被推向下而不是以某种方式向上拉.(我知道如何调整他们的上衣:))

而且我知道它的溢出:隐藏了导致它,但不确定为什么它推动该div向下.

body {
  width: 350px;
  margin: 0px auto;
}

#container {
  border: 15px solid orange;
}

#firstDiv {
  border: 10px solid brown;
  display: inline-block;
  width: 70px;
  overflow: hidden;
}

#secondDiv {
  border: 10px solid skyblue;
  float: left;
  width: 70px;
}

#thirdDiv {
  display: inline-block;
  border: 5px solid yellowgreen;
}

http://jsfiddle.net/WGCyu/.

当两者inline-block div的高度不同时,为什么两者中的较短者不对齐容器的顶部？(演示):

.container { 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small {
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;    
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige;    
}

<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>

如何对齐div容器顶部的小？

All of the elements within .track-container should line up nice and in line, each side by side, constrained by the 200px height they've been given with no weird margins or padding. Instead, you have the strangeness that occurs in the aforementioned fiddle.

What is causing .album-artwork and .track-info to get pushed halfway down the page, and how can I fix it? Also, I acknowledge that a table may be a better way of approaching this whole setup, but I want …

直播页面在这里.

鉴于此HTML页面:

section[role=main] {
  margin: 1em;
  width: 95%;
  border: 1px solid #999;
}

section[role=main] article {
  width: 40%;
  height: 180px;
  margin: 1em;
  display: inline-block;
  border: 1px solid black;
}

<section role="main">
  <article>Java</article>
  <article></article>
</section>

<section role="main">
  <article>Java</article>
  <article>JavaScript</article>
</section>

我希望我的两篇文章都是一致的,但正如我在下面的截图中看到的那样,只有当我的两篇文章都有文本时,这些<article>元素才是中心对齐的:

是什么导致了这种行为,以及如何解决？

遇到了一个奇怪的CSS问题.有人可以解释为什么有内容的盒子没有垂直对齐？

如果您将文本放在带有类的范围内.divPutTextToFixIssue- 它会正确对齐.

http://jsfiddle.net/KgqJS/88/

   #divBottomHeader {
        background-color: #d5dbe0;
        height: 43px;
    }
    .divAccountPicker {
        display: inline-block;
        background: blue;            
        width: 200px;
        height: 40px;
    }
    .divAccountData {
        display: inline-block;
        background: red;
        width: 400px;
        height: 40px;
    }

<div id="divBottomHeader">
        <div class="divAccountPicker">
           <span class="divPutTextToFixIssue"></span>                 
        </div>
        <div class="divAccountData">
            <span>Balance: $555</span>
        </div>
    </div>