Question

我如何获得两个div区域？在下面的网站上，我尝试将搜索字段放在中心和滑块上： http://informationen.lensbreak.com

<div style="width: 100%; height: 100%; position: relative;">
    <div sytle="width: 100%; height: 100%; position: absolute; top: 0; left: 0;">[rev_slider testslider]</div>
    <div sytle="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;">[search]</div>
</div>

整个事情应该保持敏感。非常感谢您的快速回答！

Best，Steven

Answer 1

通常，如果可以避免使用内联样式，则不应使用类 - 而是使用类。以下是一个解决方案，将搜索框水平和垂直居中于滑块上。

/* This is for your search form */
#completeSearchForm {
  margin: 0 auto;
  transform: translate(0px, -50%);
}

/* This is for the div that contains the search form */
.your-modifier {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
}

希望这会对你有所帮助。如果是这样，请将问题标记为已解决 - 否则请在下面发表评论。

Answer 2

试试这个：（我为每个div添加了边框，以帮助您查看div的区域。）

    <!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document</title>
</head>
<body>

<div style="width: 100%; height: 100%; border: red 3px solid">
    <div style="width: 100%; height: 100%;  border: blue 2px solid ">[rev_slider testslider]</div>
    <div style="width: 100%; height: 100%;  border: green 1px solid ">[search]</div>
</div>

</body>
</html>

如果您需要也可以使用

<table>

而不是div，对你来说更容易。

叠加两个div

2 个答案: