Question

我有以下代码，但我不确定如何调整它，以便我在框的监视器侧有20px margin的中心框左右两个框，大约10 to 15px margin在盒子之间。

我似乎也无法让它们在一条直线上对齐。我知道我现在只有一个左框。

的jsfiddle：

CSS：

body{
    background-repeat:repeat;
    background-image:url('../images/bg.jpg');
}
h1{
    text-align:center;
    color:#8f4988;
}
.bold{
    font-weight: bold;
}
a{
    font-weight: bold;
    color:#8f4988;
}
p{
    margin: 5px 25px 0 25px;
    text-align:left;
    font-family: Arial, "MS Trebuchet", sans-serif;
}

#wrapper{
    margin:8% auto;
    background-color:#e3e3e3;
    border-radius:5px;
    width:550px;
    min-height:350px;
}
#logo{
    width:150px;
    margin:0 auto;
    padding:10px 0 10px 0;
}
#socialMedia{
    float:right;
    width:205px;
    height:64px;
    margin:10px 0 0 0;
}

#socialMedia p {
    float:left;
    margin:0 auto;
}
#socialMedia .twitter{
    width:49px;
    height:64px;
    background:url('../images/twittericon.png') no-repeat;
}
#socialMedia .facebook{
    width:49px;
    height:64px;
    background:url('../images/facebookicon.png') no-repeat;
}
#socialMedia .linkedin{
    width:49px;
    height:64px;
    background:url('../images/linkedinicon.png') no-repeat;
}
#portfolio{
    height:350px;
    width:350px;
    margin:-452px 0 0 5px;
    background-color:#e3e3e3;
    border-radius:5px;
}

#portfolio h3{
    padding:15px 0 10px 0;
    text-align: center;
    font-family: Arial, "MS Trebuchet", sans-serif;
}
#portfolio li{
    text-align: center;
    padding:0 0 15px 0;
}
#portfolio li a{
    font-weight: normal;
    color:#000;
    text-decoration: none;
}

HTML：

<div id="wrapper">

        <div id="logo">
            <img src="_assets/images/logo.png" alt="Logo">
    </div>
            <h1>H1</h1>
            <div class="paragraphContent">
                <p>Content</p>

    <br/><br/>

    <p>
        Regards,
    </p>
                    <p class="bold">Name</p> 
            </div>
                <div id="socialMedia">
                    <a href="http://www.twitter.com" title="Follow me on Twitter"></a>
                </div>

        </div>
    <div id="portfolio">
        <h3>Portfolio</h3>
        <ul>
            <li><a href="#">Text</a></li>
        </ul>

        </div>

Answer 1

你想要实现这个目标吗？

http://jsfiddle.net/qY6BT/1/

跨浏览器浮动框

1 个答案: