Divs並排，居中，並溢出邊緣的屏幕

我想設計一個登錄頁面鏈接到2個Web應用程序。我試圖讓設計儘可能具有視覺吸引力。我認爲如果包含鏈接的Div並排在屏幕的中心，它們的邊緣會在屏幕的左右兩邊溢出，那看起來會不錯。那麼我可以把他們border-radius和一些不錯的塊狀顏色：Divs並排，居中，並溢出邊緣的屏幕

目標：

enter image description here

我已經試過各種選項，包括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），但沒有任何東西可以讓它們溢出屏幕。

來源

2015-04-21 Mark d

爲什麼他們需要溢出，如果你隱藏溢出？不知道你在這裏試圖做什麼 –

我想他們不這樣做，但如果有意義的話，我想'邊界半徑'的一半的_appearance_。 –

既然你知道尺寸，你可以這樣做： http://jsfiddle.net/bsu9onsc/1/ 試圖改變框架的寬度，你會看到如何按鈕按照（設置索姆溢出隱藏隱藏滾動（如版本/ 2）。 –

只要使用絕對位置就可以了。

我已經添加了一個包裝，但它可能不是必需的。

* { 
 
    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>

來源

2015-04-21 10:14:08

非常感謝！您的原始評論讓我記住，您可以爲每個角落獨立設置「border-radius」，這當然意味着它實際上不必溢出。值得注意的是，在Firefox中，至少'border-radius：％％％％'語法繪製了滑稽的橢圓半徑，所以我將使用'border-top-left-radius'等等精細。再次感謝！ –

您可以用絕對定位和切緣陰性（右用項目）實現這一目標。爲了達到這個效果，你必須修正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，我我們已將您的尺寸分區，以便您可以在小窗口中看到效果

來源

2015-04-21 10:15:03 mattytommo

以下是您需要的代碼：

.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。

來源

2015-04-21 10:22:49

Divs並排，居中，並溢出邊緣的屏幕

回答

相關問題