Question

所以，我试图对齐四个图像，两个在顶部，两个在底部。这四个部分一起形成一张地图。更清楚一点：我在PS中用四个相同的部分切割地图的图片，现在我想用HTML代码将这些部分拼凑在一起。

代码看起来像这样。

HTML：

<div id="container">
<a href="topleft.html"><img src="topleft.png" height="50%"></a>
<a href=""><img src="topright.png" height="50%"></a>
<br style="clear:both"/>
<a href=""><img src="bottomleft.png" height="50%"></a>
<a href=""><img src="bottomright.png" height="50%"></a>
</div>

</body>

CSS：

img {
        display:block;
        float:left;
        padding:0px;
        margin: 0px;
        position: relative; 

    }  

#container {
    border: 10px solid black;
    height: 2000px;
    width:1500px;
    position: relative;
    margin: 20px auto;
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px; 

}

当我的图片周围没有div时，其大小（height="50%"）是正确的，也是float: left彼此对齐的方式（除了我使用{{1}的地方但是当我把它们放在div中时，我的size属性不起作用，并且在每张图片之后都有一个换行符，所以它们会叠加在一起。

Answer 1

图像是内联元素，就像文本一样。 Div是块级元素，占据浏览器的整个宽度。您在内联元素周围包装了一个块级元素。这就是为什么你的内联图像不再按你的意愿工作的原因。即使浮动也无法解决问题，因为图像浮动但div占据整个宽度。

解决此问题的一种方法是将public function index($param='') { if($param == 'error') $param = 'Incorrect username or password'; $data = array('title'=>'Login', 'message'=>$param, 'isi' => 'login/vlogin', 'base_url'=>base_url()); $this->load->view('layout/wrapper', $data); } public function do_login(){ $data = $this->input->post(null,true); $is_login = $this->db->get_where('user',array( 'email'=>$data['email'], 'password'=>$data['password'], 'active'=> 1 ))->row(); if($is_login){ $session_set = array( 'is_login' => true, 'firstname' => $is_login->firstname, 'lastname' => $is_login->lastname, 'jkl' => $is_login->jkl, 'id' => $is_login->id, 'lastlogin' => $is_login->lastlogin ); $this->db->update('user',array('lastlogin'=>date('Y-m-d H:i:s')),array('id'=>$is_login->id)); $this->session->set_userdata($session_set); redirect('homepage/homepage/menu'); }else{ redirect('login/login/index/error'); } }或display:inline;设置为您的div，或者您可以浮动div。

Answer 2

你可以尝试这个：

img {
        display:inline;
        float:left;
        padding:0px;
        margin: 0px;
        position: relative; 

    }  

#container {
    border: 10px solid black;
    height: 2000px;
    width:1500px;
    position: relative;
    margin: 20px auto;
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px; 
    display:inline;
}

DEMO FIDDLE

Answer 3

但是当我把它们放在div中时，我的尺寸属性不起作用，并且每张图片后面都有一个换行符，所以它们堆叠在一起彼此。

当您将图片放入div时，它们会被block element包裹，默认为div。块元素使用其容器的所有可用宽度。所以div将垂直堆叠。

HTML height属性并不像您期望的那样工作，因为当使用百分比值时，height不会相对于图像大小。

来自height attribute definition in the spec：

请注意，以百分比表示的长度基于水平或目前可用的垂直空间，而不是自然尺寸图像，对象或小程序。

要快速，高效地使用现代（CSS3）布局技术来实现布局，请尝试以下方法：

<强> HTML

<div id="container">
    <a href=""><img src="http://i.imgur.com/60PVLis.png" alt=""></a>
    <a href=""><img src="http://i.imgur.com/60PVLis.png" alt=""></a>
    <a href=""><img src="http://i.imgur.com/60PVLis.png" alt=""></a>
    <a href=""><img src="http://i.imgur.com/60PVLis.png" alt=""></a>
</div>

<强> CSS

#container {
    display: flex;
    flex-wrap: wrap;
    width: 250px;
    height: 250px;
}

img { width: 125px; }

DEMO

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。

使用<div>时，图像属性会搞乱吗？

3 个答案: