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

嗨，这就是让你的按钮向右移动的技巧。我使用浮动使它成为你右边的联系人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

＆＃13;

$config = array();
$config['appId'] = '<myappid>';
$config['secret'] = '<mysecret>';
$config['fileUpload'] = false;

$facebook = new Facebook($config);

$feed = $facebook->api("/<groupid>/feed");

＆＃13;

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

＆＃13;

将<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>添加到按钮和内容中。并使用classes和style.css。不要使用内联样式。

您也可以使用固定宽度。这比浮动按钮imo更好。

＆＃13;

display:inline-block;

＆＃13;

.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%;
}

＆＃13;

Answer 5

您应该使用div作为包含div的overflow: hidden。和其他漂浮在容器内的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>

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>

在一个盒子里用css的盒子

6 个答案: