Question

首先，我是后端开发人员，我应该说这几乎是我第一次做前端的事情。我正在努力定位我的布局。在这里，我分享了我的JS FIDDLE。我想要的是将先前<li>的{{1}}元素放在第二个<li>的右侧。然而它总是在变速。

Answer 1

使用display:table-cell和vertical-align:top

#advDiv ul li ul li{
    vertical-align: top;
    border: 1px solid yellow;
    display: table-cell;
    margin: 0;
}

＆＃13;

#advDiv {
  width: 60%;
  overflow: auto;
  border: 1px solid #E5E5E5;
  /*  */
}
ul {
  list-style: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: block;
}
#advDiv ul li {
  margin: 3px;
}
#advDiv ul li ul li {
  vertical-align: top;
  border: 1px solid yellow;
  display: table-cell;
  margin: 0;
}
#advDiv ul li ul li div.thmImgDiv {
  width: 100px;
  height: 80px;
  border: 1px solid #666666;
  overflow: hidden;
  position: relative;
  display: inline-block;
}
div {
  display: block;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}

＆＃13;

<div class="mapCDiv" id="advDiv">
  <ul>
    <li>
      <ul>
        <li>
          <div class="thmImgDiv">
            <img alt="ddd" src="http://zachomes.com.au/wp-content/uploads/Stanford_web.jpg" style="position: absolute;" onload="OnImageLoad(event);" />
          </div>
        </li>
        <li><span>Dene dndme fjkn djk dfg mdfg kljdfgk ldfg dfgd lkş dfg </span>
        </li>
      </ul>
    </li>
  </ul>
  <div class="clear"></div>
</div>

＆＃13;

Answer 2

正在运行的JSFIDDLE - 支持动态内容：

http://jsfiddle.net/fixit/jhcqczm1/3/

我修改了以下选择器：

#advDiv ul li ul li{ /* updated inline-block to: inline; removed float */
    border: 1px solid yellow;
    display:inline;
    margin: 0;
}

#advDiv ul li ul li:first-child { /* set inline-block only for first LI, to allow height style */
    display: inline-block;
}

float li包含div不起作用

2 个答案: