Question

我试图在我的垂直导航栏旁边放一张图片，但它正在下面显示。

这就是我这样做的方式

＆＃13;

    body
    {
        font-family: 'Open Sans', sans-serif;
        background-color: #333;
    }

    .element
    {
        display:inline-block;
        float:left;
    }

    #wrapper
    {
        position:absolute;
        height:100%;
        width:200px;
        bottom:0px;
        background-color:#0F4D92;
    }

    nav
    {
        top: 50%;
        margin-top: -75px;
        position: fixed;
    }

    ul
    {
        list-style-type: none;
        width: 200px;
        height: 40px;
    }

＆＃13;

    <div class="element" id="wrapper">
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="withdraw.php">Withdraw</a></li>
                <li><a href="deposit.php">Deposit</a></li>
            </ul>
        </nav>
    </div>

    <img class="element" src="../bg.jpg"/>

＆＃13;

然而，这就是它的样子： Behind

如您所见，图像位于导航栏后面。我不能只使用边距，因为我需要一个灰色空间大小的元素，所以我可以将图像放在该空间的中心。那么我该如何解决这个问题？

Answer 1

导航栏的包装器为position: relative;，这意味着其他任何元素都不会与之交互。也许可以尝试使用using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class ILSecure_login : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void LoginButton_Click(object sender, EventArgs e) { if (FormsAuthentication.Authenticate(this.UserName.Text.Trim(), this.Password.Text.Trim())) { FormsAuthentication.RedirectFromLoginPage(this.UserName.Text.Trim(), false); } else { this.FailureText.Text = "Incorrect username or password.<br><b>Please re-enter your credentials.</b>"; } } }。

Answer 2

从你想要实现的目标中收集，我冒昧地改变了你的标记并使你成为一份工作副本。我认为不如你想做的那么复杂。我希望这会有所帮助。

＆＃13;

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  font-family: 'Open Sans', sans-serif;
  background-color: #333;
}
.element {
  position: relative;
  height: 100%;
  width: 100%;
  font-size: 0;
}
nav,
.imgWrapper {
  display: inline-block;
  height: 100%;
}
nav {
  width: 20%;
  background-color: #0F4D92;
  font-size: 1rem;
}
nav > * {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.imgWrapper {
  vertical-align: top;
  width: 80%;
}
.imgWrapper > img {
  width: 100%;
  height: 100%;
}
ul {
  list-style-type: none;
  width: 200px;
  height: 40px;
}

＆＃13;

<div class="element">
  <nav>
    <ul>
      <li><a href="">Home</a>
      </li>
      <li><a href="withdraw.php">Withdraw</a>
      </li>
      <li><a href="deposit.php">Deposit</a>
      </li>
    </ul>
  </nav>
  <div class="imgWrapper">
    <img src="http://placehold.it/2000x2000" alt="" />
  </div>
</div>

＆＃13;

Answer 3

顺便提一下，一个解决方案就是给.element一个左边距，但如果你想在导航栏旁边显示一些东西（因为它的绝对位置），你总是要设置一个边距：

.element
{
    display:inline-block;
    float:left;
    margin-left: 210px;
}

Answer 4

包装位置导致此问题。你必须把它改成亲戚。您还需要更改以下内容：

 ##wrapper {
   position: relative;
 }
 #wrapper {
   float: left;
   width: 250px;
   overflow: hidden;
 }
 .element {
   float: right;
 }
 #wrapper,
 .element {
   display: inline-block;
   width: 100%;
 }

在导航栏下显示的图像

4 个答案: