box in a box with css

我是CSS中的新手，試圖在wordpress頁面的中心創建一個號召性用語。box in a box with css

我從頁面的其餘部分採取了一些樣式。

我在製作盒子內的盒子時遇到麻煩。第二個應該是在我的想法在大的右邊的不同顏色的文字和背景的右邊。

隨着我的嘗試（見下文），我無法將第二個定位在右側。

<div style="text-align:center;"> 
 
    <div style="margin: 20px 0px; padding: 15px; background: #A5E5EF none repeat scroll 0% 0%; 
 
    border-radius: 10px; font-weight: normal; font-family: ProximaNova-Regular; 
 
    line-height: 26px; 
 
    font-size: 21px; color: #3D5B65; text-transform:uppercase;"> 
 
    xxx xx xxxx xxxxxxx xxxxxx xxx xx xxx xxxxxxxx xxxxxxx 
 
    <div style="position:relative;right:10px;width: 30%;font-family: ProximaNova-Bold; 
 
    text-transform: uppercase; 
 
    text-shadow: 1px 1px 1px #000; 
 
    color: #FFF; 
 
    font-size: 19px;background: #FFF;border-radius: 10px;margin: 5px 5px; 
 
    padding: 5px;">CONTACT US 
 

 
    </div> 
 

 
    </div> 
 

 
</div>

感謝您的關注

來源

2015-10-13 bobrock4

是的東西你正在尋找？如果您有其他問題，請告訴我。

<div style="text-align:center; margin: 20px 0px; padding: 15px; background: #A5E5EF none repeat scroll 0% 0%; border-radius: 10px; font-weight: normal; font-family: ProximaNova-Regular; 
 
line-height: 26px; font-size: 21px; color: #3D5B65; text-transform:uppercase;"> 
 
<div style="float:left; width:70%"> 
 
xxx xx xxxx xxxxxxx xxxxxx xxx xx xxx xxxxxxxx xxxxxxx 
 
    </div> 
 
<div style="float:right;text-shadow: 1px 1px 1px #000; width:25%; 
 
color: #FFF;font-size: 19px; background: #FFF;border-radius: 10px; padding: 5px;">CONTACT US 
 

 
    </div> 
 
    <div style="clear:both;"></div> 
 
</div>

來源

2015-10-13 09:16:41 CreativePS

當你寫right:10px;，該元素的位置應該是絕對的還是傳統或。此外，你寫width:30%;，它總是需要在具有指定寬度的div內。下面試試這個代碼：

<div style="text-align:center;"> 
<div style="margin: 20px 0px; padding: 15px; background: #A5E5EF none repeat scroll 0% 0%; 
border-radius: 10px; font-weight: normal; font-family: ProximaNova-Regular; 
line-height: 26px; width:100%; 
font-size: 21px; color: #3D5B65; text-transform:uppercase;"> 
xxx xx xxxx xxxxxxx xxxxxx xxx xx xxx xxxxxxxx xxxxxxx 
<div style="position:absolute;right:10px;width: 30%;font-family: ProximaNova-Bold; 
text-transform: uppercase; 
text-shadow: 1px 1px 1px #000; 
color: #FFF; 
font-size: 19px;background: #FFF;border-radius: 10px;margin: 5px 5px; 
padding: 5px;">CONTACT US 

    </div> 

    </div> 

</div>

如果像你想它不工作，讓我們看看到浮動位置http://www.w3schools.com/css/css_float.asp

來源

2015-10-13 09:17:36

嗨這裏的技巧，使你的按鈕向右。我使用float使其成爲您的聯繫人權利。我已經評論了一些，如果你不明白。請檢查演示謝謝！

HTML

<div style="text-align:center;"> 
<div class="parent1" style="margin: 20px 0px; padding: 15px; background: #A5E5EF none repeat scroll 0% 0%; 
border-radius: 10px; font-weight: normal; font-family: ProximaNova-Regular; 
line-height: 26px; 
font-size: 21px; color: #3D5B65; text-transform:uppercase; padding-bottom:20px;"> <!-- I add padding bottom:20px to increase the parent div --> 
xxx xx xxxx xxxxxxx xxxxxx xxx xx xxx xxxxxxxx xxxxxxx 
<div class="child" style="position:relative;right:10px;width: 30%;font-family: ProximaNova-Bold; 
text-transform: uppercase; 
text-shadow: 1px 1px 1px #000; 
color: #FFF; 
font-size: 19px;background: #FFF;border-radius: 10px;margin: 5px 5px; 
padding: 5px;">CONTACT US 

    </div> 

    </div> 

</div>

CSS

.child{ /* I set it to the right using float */ 
    float:right; 
}

DEMO

來源

2015-10-13 09:19:14 Fiido93

.callout_box { 
 
    text-align: center; 
 
} 
 
.content { 
 
    margin: 20px 0px; 
 
    padding: 15px; 
 
    background: #A5E5EF none repeat scroll 0% 0%; 
 
    border-radius: 10px; 
 
    font-weight: normal; 
 
    font-family: ProximaNova-Regular; 
 
    line-height: 26px; 
 
    font-size: 21px; 
 
    color: #3D5B65; 
 
    text-transform: uppercase; 
 
    display: inline-block; 
 
} 
 
.button { 
 
    position: relative; 
 
    right: 10px; 
 
    width: 30%; 
 
    font-family: ProximaNova-Bold; 
 
    text-transform: uppercase; 
 
    text-shadow: 1px 1px 1px #000; 
 
    color: #FFF; 
 
    font-size: 19px; 
 
    background: #FFF; 
 
    border-radius: 10px; 
 
    margin: 5px 5px; 
 
    padding: 5px; 
 
    display: inline-block; 
 
}

<div class="callout_box"> 
 
    <div class="content"> 
 
    xxx xx xxxx xxxxxxx xxxxxx xxx xx xxx xxxxxxxx xxxxxxx 
 
    <div class="button"> 
 
     CONTACT US 
 
    </div> 
 
    </div> 
 

 
</div>

添加display:inline-block;給按鈕和內容。並使用類和style.css。不要使用內聯樣式。

您也可以使用固定寬度。這比浮動按鈕更好。

.callout_box { 
 
    margin: 20px 0px; 
 
    padding: 15px; 
 
    background: #A5E5EF none repeat scroll 0% 0%; 
 
    border-radius: 10px; 
 
    font-size: 0; 
 
} 
 
.content { 
 
    font-weight: normal; 
 
    font-family: ProximaNova-Regular; 
 
    line-height: 26px; 
 
    font-size: 21px; 
 
    color: #3D5B65; 
 
    text-transform: uppercase; 
 
    display: inline-block; 
 
    width: 75%; 
 
} 
 
.button { 
 
    position: relative; 
 
    right: 10px; 
 
    width: 30%; 
 
    font-family: ProximaNova-Bold; 
 
    text-transform: uppercase; 
 
    text-shadow: 1px 1px 1px #000; 
 
    color: #FFF; 
 
    font-size: 19px; 
 
    background: #FFF; 
 
    border-radius: 10px; 
 
    margin: 5px 5px; 
 
    padding: 5px; 
 
    display: inline-block; 
 
    width: 20%; 
 
}

<div class="callout_box"> 
 
    <div class="content"> 
 
    xxx xx xxxx xxxxxxx xxxxxx xxx xx xxx xxxxxxxx xxxxxxx 
 
    </div> 
 
    <div class="button"> 
 
    CONTACT US 
 
    </div> 
 
</div>

來源

2015-10-13 09:20:26

你應該有一個overflow: hidden作爲div一個包含分區。而其他的div漂浮在容器內：

.container { 
 
     overflow: hidden; 
 
    } 
 

 
    .left { 
 
     float: left; 
 
     width: 50%; 
 
    } 
 

 
    .right { 
 
     float: left; 
 
     width: 50%; 
 
    }

<div class="container"> 
 
     <div class="left"> 
 
      Left box 
 
     </div> 
 
     <div class="right"> 
 
      Right box 
 
     </div> 
 
    </div>

來源

2015-10-13 09:22:05

試試這個：

<html> 
<head> 
    <title>Box inside Box</title> 
</head> 
<body> 
    <div style="text-align:center;"> 
<div style="margin: 20px 0px; padding: 15px; background: #A5E5EF none repeat scroll 0% 0%; 
border-radius: 10px; font-weight: normal; font-family: ProximaNova-Regular; 
line-height: 26px; 
font-size: 21px; color: #3D5B65; text-transform:uppercase;"> 
xxx xx xxxx xxxxxxx xxxxxx xxx xx xxx xxxxxxxx xxxxxxx 
<div style="position:relative;right:10px;width: 30%;font-family: ProximaNova-Bold; text-transform: uppercase; text-shadow: 1px 1px 1px #000; color: #FFF; font-size: 19px;background: #FFF;border-radius: 10px;margin: -6px; float:right; padding: 5px;">CONTACT US</div> 

    </div> 

</div> 
</body> 
</html>

來源

2015-10-13 09:22:48

box in a box with css

回答

相關問題