Question

我正在尝试将背景图像修复为某些标签，但我遇到了麻烦。
我做了一切响应，但我无法弄清楚如何匹配标签与底层货架...
我也想将表格div放在同一级别（但在货架图像之外）......
一切都将充满动态值，所以如果您阅读通用标签，请不要担心。

这是代码：

<!DOCTYPE html>
<html>
<head>
<!-- Il viewport rende tutto ciò che c'è al suo interno responsive riadattando gli elementi fino a 240px di larghezza del display-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>


.menusx {
  float:left;
  width:20%;
  text-align:center;
  margin-bottom:7px;
}
.menu {
  float:left;
  width:20%;
  text-align:center;
  margin-left: 5px;
  margin-bottom:7px;
}
.menuitem {
  background-color:#e5e5e5;
  padding:8px;
  margin-top:7px;
}

.menudiv {
  background-image: url("http://static.hdw.eweb4.com/media/wallpapers_1920x1200/digital-art/1/1/wooden-shelves-digital-art-hd-wallpaper-1920x1200-7977.jpg"); 
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

.right {
  background-color:#e5e5e5;
  float:left;
  width:20%;
  padding:14px;
  margin-top:7px;
  text-align:center;
  margin-left: 5px;
}

@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">


<div style="overflow:auto">
	<div class="menudiv" style="overflow:auto">
  <div class="menusx">
    <div class="menuitem">Link 1 sx</div>
    <div class="menuitem">Link 2 sx</div>
    <div class="menuitem">Link 3 sx</div>
    <div class="menuitem">Link 4 sx</div>
  </div>


  <div class="menu">
    <div class="menuitem">Link 1</div>
    <div class="menuitem">Link 2</div>
    <div class="menuitem">Link 3</div>
    <div class="menuitem">Link 4</div>
  </div>
   </div>


  <div class="right">
    <h3>Table</h3>
    <p>Dynamic content of the table</p>
  </div>
</div>


</body>
</html>

这是基本的想法：

Answer 1

您可以使用此更改。您需要将“menudiv”修改为更小的宽度并浮动，因此表格可以在右侧呈现，而不是在链接表下呈现。

“menudiv”背景大小需要具有“覆盖”属性，因此图像将填充当前的div大小。

然后你需要将“menusx”和“menu”类的宽度修改为49％，所以这两个div将填满完整的“menudiv”，右边的表格有2％的边距与左边的分隔。 “menusx”和“menu”宽度值为49,49，并添加menudiv margin-left 2％，因此49 + 49 + 2 =上部div的100％填充。

.menudiv {
  background-image: url("http://static.hdw.eweb4.com/media/wallpapers_1920x1200/digital-art/1/1/wooden-shelves-digital-art-hd-wallpaper-1920x1200-7977.jpg"); 
  width: 40%;
  background-repeat: no-repeat;
  background-size: cover;
  float: left;
}
.menusx {
  float:left;
  width:49%;
  text-align:center;
  margin-bottom:7px;
}
.menu {
  float:left;
  width:49%;
  text-align:center;
  margin-left: 2%;
  margin-bottom:7px;
}

我希望这就是你要找的东西。

Answer 2

移动你的，

<div class="right">
    <h3>Table</h3>
    <p>Dynamic content of the table</p>
    </div>
</div>

在<div style="overflow:auto">块内部，代码应如下所示，

<div style="overflow:auto">
  <div class="menudiv" style="overflow:auto">
    <div class="menusx">
      <div class="menuitem">Link 1 sx</div>
      <div class="menuitem">Link 2 sx</div>
      <div class="menuitem">Link 3 sx</div>
      <div class="menuitem">Link 4 sx</div>
    </div>

   <div class="menu">
    <div class="menuitem">Link 1</div>
    <div class="menuitem">Link 2</div>
    <div class="menuitem">Link 3</div>
    <div class="menuitem">Link 4</div>
  </div>
  <div class="right">
    <h3>Table</h3>
    <p>Dynamic content of the table</p>
    </div>
  </div>
</div>

工作演示：https://jsfiddle.net/wrtjx0x0/4/

希望这有帮助！

修复标签的背景

2 个答案: