Question

我正在尝试在页面上设置一个居中的元素，并在其右侧显示另一个显示某些信息的元素。我已经尝试将元素向右浮动，它对我来说很好看，但我有一个很大的显示。我调整了浏览器窗口的大小，然后将中心元素向下推，这是我不想要的。我希望它像在这个页面上一样：http://imgur.com/XVuMBx6，照片容器元素居中，右边的东西是所有链接都在它的右侧，但当你使显示器变小时，没有任何东西得到向下推，但正确的元素刚刚移出浏览器窗口。我的CSS看起来像这样，＃image是我想要居中的div，而#info和.sharebutton就是我想要的权利：

#image {
    max-width: 900px;
    display: block;
    margin:auto;
    position: relative;
}
#info, .sharebutton {
    display: inline-block;
    float: right;
    position: relative;
}

我尝试设置一个明确的：在图像元素上，但由于某种原因，这会将我的#info和.sharebutton元素扭曲到页面的左侧。感谢。

编辑：我的HTML：

<div id="info">
    <ul>
        <li>Uploaded: {{time}}</li>
        <br>
        <li>Views: {{view_count}}</li>
    </ul>
    <div class="sharebutton">
        <a href="#openModal">
            <button id="share">Click Me</button>
        </a>

        <div id="openModal" class="modalDialog">
            <div>
                <a href="#close" title="Close" class="close">X</a>
                <h2>Modal Box</h2>

            </div>
        </div>
    </div>


</div>
<article>
    <div id="image">
        <a href="{{source}}">
            <img src="{{source}}" />
        </a>
    </div>
</article>

Answer 1

#info, .sharebutton使用margin-right:0代替浮动

Answer 2

基本方法是这样的：

article {margin: 0 200px;}
#info {width: 190px;}

这使得居中区域远离侧边栏项目。

Answer 3

让我们这样做有点不同：）

有一个小提琴 - Fiddle link!

这里有两大块：div#image和div#info。两者都浮在左边。 <body>以margin: 0 auto和max-width为中心。

CSS

body {
margin: 0 auto;
/* Center body */
max-width: 900px;
}
#image {
max-width: 900px;
float: left;
margin: 0 20px 0 0;
}
#info, .sharebutton {
float: left;
}

HTML - 略有不同...... <article>首先。

<article>
    <div id="image"> <a href="{{source}}">
            <img src="http://placehold.it/450x400">
        </a>

    </div>
</article>
<div id="info">
    <ul>
        <li>Uploaded: {{time}}</li>
        <li>Views: {{view_count}}</li>
    </ul>
    <div class="sharebutton">
        <button id="share">Click Me</button>
        <div id="openModal" class="modalDialog"> <a href="#close" title="Close" class="close">X</a>

             <h2>Modal Box</h2>

        </div>
    </div>
</div>

CSS以一个元素为中心并将另一个元素浮动到它的右侧？

3 个答案: