Div 并排、居中和溢出屏幕边缘

Question

我正在尝试为 link 设计 2 个网络应用程序的登录页面。我正在努力使设计尽可能具有视觉吸引力。我认为如果包含 link 的 Div 并排在屏幕中央，并且它们的边缘溢出屏幕的左右，那会很好看。然后我可以在它们上面放一个 border-radius 和一些漂亮的块状颜色：

目标：

我尝试了很多选项，包括 inline-block 和 overflow:hidden:

HTML

<div id="centre-pane">
    <div class="app-btn">
        <a href="l1.php"><img src="icon.png">link text</a>
    </div>
    <div class="app-btn">
        <a href="l2.php"><img src="icon2.png">link text</a>
    </div>
</div>

CSS

.app-btn 
{
    width:1000px;
    height:320px;

    display:inline-block;
    border:10px solid black;
    border-radius: 50px;
}

#centre-pane {   
    width:2000px;
    margin:0 auto;
    text-align:center;
    overflow-x: hidden;
}

这可能吗？我找到了几种让它们并排显示的方法（例如 here），但没有任何方法能让它们溢出屏幕。

Answer 1

只需使用绝对位置即可。

我添加了包装器，但可能不需要。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html,
.wrapper {
  height: 100%;
}
.wrapper {
  position: relative;
}
.btn {
  width: 45%;
  height: 30%;
  background: lightblue;
  border: 2px solid blue;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.left {
  left: 0;
  border-radius: 0 25% 25% 0;
  border-left: none;
}
.right {
  right: 0;
  border-radius: 25% 0 0 25%;
  border-right: none;
}

<div class="wrapper">
  <div class="btn left"></div>
  <div class="btn right"></div>
</div>

Answer 2

您可以通过绝对定位和负边距（对于正确的项目）来实现这一点。为了达到效果，您必须修复 body 的大小。我还分别向第一项和第二项添加了个人类（.app-btn-1 和 .app-btn-2）：

body {
    width: 2000px;
    overflow-x: hidden;
}

.app-btn {
    width:1000px;
    height:320px;
    position: absolute;
    border:10px solid black;
    border-radius: 50px;
    overflow-x: hidden;
}

.app-btn-1 {
    left: -500px;
    text-align: right;
}

.app-btn-2 {
    left: 100%;
    margin-left: -500px;

}

DEMO

注意：为了让我的演示在 jsfiddle 中看起来正确，我将大小分成四等分，这样您就可以在小 window[=15= 中看到效果]

Answer 3

这是您需要的代码：

.menu {
    display: inline-block;
    height: 200px;
    width: 40%;
    margin-top: calc(50% - 100px);    
    border: 2px solid red;
    background-color: brown;
    color: black;
    text-decoration: none;
    transition: all 0.5s;
}
#left {
    float: left;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-left: -10px;
}
#right {
    float: right;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: -10px;
}
.menu:hover {
    background-color: gray;
    border-color: brown;
    color: red;
}

<a href="#"><div class="menu" id="left">Left</div></a>
<a href="#"><div class="menu" id="right">Right</div></a>

我做了一个 JS Fiddle 给你。

Div 并排、居中和溢出屏幕边缘

Divs side-by-side, centred, and overflowing edge of screen

css

css-float