相关疑难解决方法(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/.

我有一个display设置为的链接inline-block,旁边是一个<div>高度相同的链接.然而,它在<div>某种程度上向下偏移,我不知道为什么.

这是一个jsFiddle:http://jsfiddle.net/2bWjx/1/

发生了什么

#stats(灰色)显得低于a.sector one-letter.

我想要发生什么

#stats应该同样设置(顶部和底部在同一点)a.sector one-letter.

我一直在努力解决这个问题,并且可以使用一些帮助.应该是一个简单的修复!

在此先感谢您的帮助!

我试着让蓝色容器贴在上面.我该如何管理？

HTML:

<div class="container">
    <div class="a">blue</div>
    <div class="b">green</div>
</div>

CSS:

.a {
    width:100px;
    height:400px;
    display:inline-block;
    background-color:blue;
}
.b {
    width:400px;
    height:600px;
    display:inline-block;
    background-color: green;
}
.container {
    vertical-align:top;
}

http://jsfiddle.net/xswa4/

vertical-align: top;

不起作用......

我不明白什么时候vertical-align会起作用，什么时候不会起作用。

每次我遇到一个用例时，vertical-align它是否真正有效似乎都是一个抛硬币的问题。我知道它必须应用于内联元素。我读到我必须line-height为通常没有的元素指定一个。我读到该height属性必须具有静态（非自动/非％）值。我读到，vertical-align如果某些（现代）浏览器所使用的元素不是自然的内联元素，则它们无法正确处理。我不清楚是否vertical-align应该位于包含元素（例如text-align）或我想要垂直对齐的元素上。

我创建了这个 jsfiddle来尝试解决问题，但仍然感到困惑。

#outer {
  box-sizing: border-box;
  border: red 1px solid;
  height: 200px;
  width: 400px;
  text-align: center;
}

#inner {
  border: blue 1px solid;
  display: inline-block;
  height: 200px;
  vertical-align: middle;
}
    
#header {
  border: green 1px solid;
  display: inline-block;
  line-height: 1em;
  margin: 0;
}

<div id="outer">
  <div id="inner">
    <h1 id="header">
      Some Text
    </h1>
  </div>
</div>

在上面的 jsfiddle 中，我希望#header位于 和 顶部和底部之间的中间#outer …

这可能听起来像一个过时的主题,因为由于flex-box和grid,没有人仍然使用内联块属性,但我想知道它,我想询问它.

当创建两个div并将它们分配为显示为内联块然后在其中一个中添加任何元素时,结果非常奇怪,其中包含该元素的div将向下滑动到另一个div的底部减去高度添加的元素.

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
}

<div id="left">
  <span>Text</span>
</div>
<div id="right"></div>

为了解决这个问题,它只能将div垂直对齐到顶部,但奇怪的是,即使我们在不对齐受影响的对象的情况下对齐另一个不受影响的div,我们也会得到相同的结果,那么到底发生了什么这里？

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
}

#left{
     vertical-align: baseline;
}

#right{
      vertical-align: top;
}

<div id="left">
  <span>text</span>
</div>
<div id="right"></div>

更新:

为了澄清事情,我删除了子元素并在两个div之外添加了一个文本,并添加了两个div,现在所有div都没有流内容,但前两个都有top属性,而后两个是不同的,一个顶部,另一个是基线:

div {
  display: inline-block;
  width: 100px;
  height: 150px;
  background: gray;
}
.right{
  vertical-align:baseline;
}
.left{
  vertical-align:top;
}

Text
<div class="right"></div>
<div class="left"></div>

<br>

Text
<div class="left"></div>
<div class="left"></div>

在第一种情况下,文本与顶部对齐,在下一次与div的基线对齐,即使它们没有流内容.

这两个内联块<div>应该(至少,我认为它们会对齐):

<div class="calendar">
    <div class="month">
        <div class="month-name">January</div>
    </div>
    <div class="day">
        <div class="day-number">21</div>
        <div class="day-name">Wednesday</div>
    </div>
</div>

<div class="button"></div>

我<div>用像素精度设置了每个的高度:

.calendar {
    display: inline-block;
    width: 80px;
    height: 74px;
}
.calendar .month {
    background-color: firebrick;
    border-radius: 3px 3px 0 0;
}
.calendar .month-name {
    color: white;
    font-size: 13px;
    text-align: center;
    height: 26px;
}
.calendar .day {
    background-color: linen;
    border-radius: 0 0 3px 3px;
}
.calendar .day .day-number {
    color: black;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    height: 30px; …

我正在开发一个网站,我很难理解为什么地球上发生这种情况:

http://i.imgur.com/DABPnlM.png

这是我的内容div的html:

<div id="content" style="display: block;">
<div id="col1">
    <h1>Prosperity Construtora E Incorporadora</h1>
    <p>[...] text [...]</p>
    <p>[...] text [...]</p>
</div>
<div id="col2">
    <h1>Empregos na Prosperity</h1>
    <p>[...] text [...]</p>
    <h1>Fotos de trabalhos realizados</h1>
    <p>[...] text [...]</p>
</div>

这是由谷歌浏览器(相关的CSS)计算的CSS:

 div#content {
      height: auto;
      margin: 15px auto 0 auto;
      width: 800px;
      text-align: left;
      padding-bottom: 23px;
 }

 div#col1 {
      display: inline-block;
      width: 510px;
 }

 div#col2 {
      display: inline-block;
      width: 260px;
 }

我注意到如果我删除段落中的一些文本,空间将增加/减少,如果我将div移动一点(通过改变它们的宽度),我移动空间.如果我让col1足够小,col2将有高于它的间距..

有任何想法吗？

编辑:jsfiddle也这样做:http://jsfiddle.net/jjY64/

解

正如NoobEditor指出的那样,我所要做的就是垂直对齐col1到顶部而不是默认底部.

我有一个非常基本的并排布局，我正在尝试实现它，但它似乎将元素向下推。

JSFiddle - https://jsfiddle.net/ca616067/1/

.whitebox {            
    background-color: #fff;            
    height: 200px;   
    display: inline-block;        
}

我已经通过使用修复了它；

Display:inline-block;
position:relative;
top:-185px;

有没有更好的方法来解决这个问题？

我希望每个元素的大小相同并正确对齐,但正如您所看到的,总周数较少的元素位于该空间的较低位置.

我可以添加幻像行,但我希望在css中进行此更正.我怎样才能做到这一点？

CSS

.miniMonth{
  position: relative;
  left: 0px;
  display: inline-block;
  padding: 30px;
  width: 340px;
  height: 327px;
  cursor: pointer;
  border: solid black 1px;
}
.contents {
  position: fixed;
  top: 50px;
  bottom: 50px;
  left: 0; 
  right: 0;
  overflow: auto;
  background-color: rgb(225, 225, 225);
}

HTML

<div class="contents">
  <div class="miniMonth">/* CALENDAR CONTENT*/</div>  
   ...
  <div class="miniMonth">/* CALENDAR CONTENT*/</div>
</div>

我有一个jsfiddle:https://jsfiddle.net/kwende/w853pkv1/

我很困惑为什么事情会以他们的方式呈现.请注意输入标签位于图像下方(在Chrome中)的位置.特别是,这个块:

<div style="width:150px;height:100%;display:inline-block;padding-top:15px;">
    <input type="submit" value="Blah" />
</div>

这是我在我的个人项目中遇到的一个淡化的例子,但它基本上捕获了正在发生的事情.如果你用一个img标签替换输入标签,那么它就像我期望的那样对齐.

我想我是在误解一些基本概念.有人可以教我为什么输入标签位于图像标签下方？

首先是代码。我正在创建一个数学方程式游戏，您应该在其中猜测方程式中缺少的运算符。运算符是使用javascript插入的图像，并且当其中一个运算符图像插入到带有一类math-box的div 中时，div的升高程度将高于所有其他div标签。我试图弄清楚为什么，我认为我有一个解决方案，可以使所有“数学盒”类都在同一高度水平上进行，这是通过浮动实现的。但是，我确实想知道为什么它比其他所有标高都高

window.onload = function() {
  var eq = document.getElementById('equation'),
      op = document.getElementById('operator'),
      btn = document.getElementsByTagName('button')[0];

  btn.onclick = function() {
    /*
    var countdown  = setInterval(function(){
    	var timer = document.querySelector('#container h1');
    	var count = parseInt(timer.innerHTML);
    	count--;
    	if(count < 1){
    		clearInterval(countdown);
    		timer.innerHTML = 0;
    		count = 30;
    	}else{
    		timer.innerHTML = count;

    	}
    },1000)
    */
    var param = Math.round(Math.random() * (3 - 1) + 1),
        operand = [], num = [],
        equation = "", result = "",
        mathBox …