Question

我想将标题划分为三列，分别为三个图像。但它们重叠。

如何将div标题分成三列。

这是我的代码：

<div data-role="page" id="loginpage" class="loginbody"> 

<div data-role="header" style="background-image:url('images/Login/header_bg.PNG');">

<img id="headerselect" alt="" src="images/Login/.PNG"  class="ui-btn-left"></img>

<img alt="" src="images/Login/.PNG"></img>

<img alt="" src="images/Login/.PNG" class="ui-btn-right"></img>

Answer 1

如果图像是静态的（总是相同的3个图像），最好的想法是融合所有图像，这样你只需要包含一个图像。如果它们不时变化，你可以在标题中插入3个div，所有这些都带有'float：left' 请告诉我你是否需要解释一下

Answer 2

在标头中为display: block个标记提供img，并使用float: left制作列。

[data-role="header"] img {
 dispaly: block;
 float: left;
}

点击DEMO此处。

Answer 3

这是定位标题中任何元素的好方法：

HTML：

<div data-role="header" id="header" style="background-image:url('images/Login/header_bg.PNG');">

  <ul>
    <li><img id="headerselect" alt="" src="images/Login/.PNG"  class="ui-btn-left" /></li>
    <li><img alt="" src="images/Login/.PNG" /></li>
    <li><img alt="" src="images/Login/.PNG" class="ui-btn-right" /></li>
  </ul>

</div>

和CSS：

#header ul li {
display: inline;
}

也可让您轻松定位！

这是一个小提琴：http://jsfiddle.net/DJSrA/4H5qs/

使用css将标题分成jquery中的列

3 个答案: