box in a box with css

Question

Я новичок в CSS, пытаясь создать призыв к действию, в центре страницы wordpress.

Я взял некоторые стили из остальной части страницы.

У меня возникли проблемы при создании коробки внутри коробки. Второй должен быть в моей идее в правой части большого с разными цветами для текста и фона.

С моими попытками (см. Ниже) я не могу позиционировать второй справа.

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

Спасибо за внимание

Answer 1

Это то, что вы ищете? сообщите мне, если у вас есть другая проблема.

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

Answer 2

Когда вы пишете 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

Answer 3

Привет здесь трюк, чтобы сделать вашу кнопку справа. Я использую float, чтобы сделать его контактным div справа. Я уже кое-что прокомментирую, если вы не понимаете. Просьба проверить демонстрационную благодарность !.

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

Answer 4

.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. Не используйте встроенный стиль.

Вы также можете использовать фиксированную ширину. Это лучше, чем плавание кнопки imo.

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

Answer 5

Вы должны сделать div с overflow: hidden как содержащими делами. и другие дивы, которые плавают внутри контейнера:

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

Answer 6

Попробуйте это:

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