Question

所以我处于一种特殊情况。我试图在左上角创建一个包含我的网站图标的标题，并在其下面创建一个Navigation div元素（Img覆盖了Nav元素）。我想要的是导航元素中的文本在左侧覆盖的图片旁边对齐。
这是我的情况图片（显然没有足够的代表发布img）：

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

这是资产净值的CSS：

.nav {
    line-height:30px;
    background-color:#eeeeee;
    height:70px;
    width:100%;   
    text-align:left;
    position: absolute;
    top: 70px;
    left: 0;
}

角落IMG：

div.cornerimg {
    margin: 5px;
    padding: 5px;
    height: auto;
    width: auto;
    position: absolute;
    top: 0;
    left: 70px;
}
div.cornerimg img {
    float: left;
    display: inline;
    margin: 5px;
    -webkit-border-bottom-right-radius: 151px;
    -webkit-border-bottom-left-radius: 151px;
    -moz-border-radius-bottomright: 151px;
    -moz-border-radius-bottomleft: 151px;
    border-bottom-right-radius: 151px;
    border-bottom-left-radius: 151px;
}

当然是HTML：

<div class="nav">
  <a href="home.htm"> Home |</a>
  <a href="download.htm">  Download |</a>
  <a href="suggestions.htm"> Suggestions |</a>
  <a href="https://sites.google.com/site/xeondosbatch/" target="_blank"> Google Site |</a>
</div>

<div class="cornerimg">
  <a href="home.htm">
    <img src="C:\Users\(User)\Desktop\Webpage\homeimg.png" alt="XeonDOS" width="250"             height="230">
  </a>
</div>

所以希望你能看到img背后的文字，但我想尝试将“XeonDOS”图像旁边的文字与文本重叠。

告诉我一些方法将文本放在div元素旁边，这很棒！

Answer 1

这是您需要做的事情的本质：

HTML：

<div id='wrapping-div'>
    <div id='image-div'></div>
    <div id='nav-div'></div>
</div>

CSS：

#wrapping-div {
    display: inline-block;        
}

Answer 2

使用.nav

离开280px

left: 280px;

Answer 3

我对您的HTML结构稍作修改。我用<div id="navcontainer"></div>包装了您的菜单链接，并为margin-left提供了347px。

＆＃13;

div.cornerimg {
    margin: 5px;
    padding: 5px;
    height: auto;
    width: auto;
    position: absolute;
    top: 0;
    left: 70px;
}
div.cornerimg img {
    float: left;
    display: inline;
    margin: 5px;
    -webkit-border-bottom-right-radius: 151px;
    -webkit-border-bottom-left-radius: 151px;
    -moz-border-radius-bottomright: 151px;
    -moz-border-radius-bottomleft: 151px;
    border-bottom-right-radius: 151px;
    border-bottom-left-radius: 151px;
}
.nav {
    line-height:30px;
    background-color:#eeeeee;
    height:70px;
    width:100%;
    text-align:left;
    position: absolute;
    top: 70px;
    left: 0;
}
div#navcontainer {
    margin-left: 347px;
}

＆＃13;

<div class="nav">
    <div id="navcontainer"><a href="home.htm"> Home |</a>
 <a href="download.htm">  Download |</a>
 <a href="suggestions.htm"> Suggestions |</a>
 <a href="https://sites.google.com/site/xeondosbatch/" target="_blank"> Google Site |</a>

    </div>
</div>
<div class="cornerimg"> <a href="home.htm">
    <img src="http://placehold.it/350x150" alt="XeonDOS" width="250"             height="230">
  </a>

</div>

＆＃13;

<强> jsFiddle Demo

html - 将文本与其他div元素旁边对齐

3 个答案: