0

无论出于何种原因，此图像使标记的其余部分无法在其容器内对齐，尽管它被设置为显示内联块：

http://jsfiddle.net/ncQXD/

对你们来说，应该是一些简单的事情。对我来说，我已经花了几天时间试图解决这个问题。

顺便说一句，我不想​​使用浮动。我不完全知道如何控制他们的怪癖，也没有时间去学习它。如果您能不使用它们，我将不胜感激。但是，如果你带我去一个涵盖他们所有不幸等的课程，我可以参加关于花车的速成课程。

现在，我需要坚持使用非浮动 CSS。

PS。边框仅用于“调试”，实际上没有必要

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css_test2.css" />
</head>
<body>
<div id="header">
    <img src="http://img710.imageshack.us/img710/938/imgbz.png" id="logo">
    <a href="#" id="logo_txt">Title goes here</a>
    <span id="social_media">Social media links</span>
</div>
</body>
</html>

CSS：

#header {
    border: 1px solid red;

    width: 800px;
    height: 123px;
    margin: 0px auto;
    padding: 0px;

    background-color: rgb(181, 230, 29);
    }

#logo {
    border: 1px solid red;
    display: inline-block;

    width: 172px;
    height: 123px;
    }


#logo_txt {
    border: 1px solid black;
    display: inline-block;

    width: 100px;
    height: 123px;
    }
#social_media {
    border: 1px solid black;
    display: inline-block;

    width: 300px;
    height: 123px;
    text-align: right;
    }
4

4 回答 4

2

解决此问题的最快方法是添加vertical-align: top样式#logo。

于 2012-06-07T03:37:47.590 回答
1

添加

vertical-align:text-top;

根据您的图像样式，vertical-align:top;也可以，但是我使用了文本顶部，因为它与文本对齐

默认的垂直对齐方式是基线，它将图像的底部与其他 div 中的文本对齐。

小提琴

于 2012-06-07T03:41:52.837 回答
1

嗨，如果您display inline-block以任何方式使用而不是定义一个属性

vertical-align:top;

因为默认情况下属性vertical-align:middle;比定义verticle-align属性要好。

现在 sam think in img tag在您的css中 定义您的img 标签属性 。 verticel-align:top

于 2012-06-07T06:15:26.367 回答
0

float左边的元素，一切正常：http: //jsfiddle.net/ncQXD/1/

我添加了这个 CSS：

#header > * {
    float: left;
}

#header {
    overflow: auto;
}​
于 2012-06-07T03:35:35.470 回答