当浏览器缩小时，如何正确对齐两个相互折叠的 div？

Question

所以，我正在构建一个网站模板，更具体地说；我正在制作一个通用的 CSS 电子表格，目前看起来还不错。但是我运行遇到了一个大问题，试图制作一半大小的 <div> class 而两个会并排对齐。 Check out my website so far（注意花絮）并注意当您将浏览器拉伸得足够远时，由于它们的大小为 45%，它们没有正确居中。我发现有两个 .lefthalf 和 .righthalf classes 有点帮助，但造成的问题多于解决方案。此外，将浏览器设置得太小会导致 <div> 彼此上下移动，但它们仍然浮动 left.

任何人都可以找到解决方案： 1. 当浏览器展开时，它们不会后退。 2. 当浏览器太小不支持对齐时，它们会上下移动。

我希望我已经说得很清楚了，如果可以的话请帮忙。

在 MY WEBPAGE

上通过 Inspect Element 自由探索

Answer 1

对于 #2 问题，发生这种情况是因为您的填充加起来等于 div 的大小并使其溢出。将其放入您的 .goog2 class.

.goog2{ 
       box-sizing: border-box;
}

对于 #1 问题试试这个把它放在你的 .goog2 中 class

.goog2{
       width:48%;
       margin:1%;
 }

如果您不想在 div 的每一侧留边距并将每个 div 对齐，只需将每个 div.

设为 0

 #div1{
       margin-left:0;
 }
 #div2{
       margin-right:0;
 }

Answer 2

当浏览器太小而无法支持对齐时，您可以使用媒体查询来更改 CSS。大致如下：

.two-col {
    width:48%;
    float:left;
    height:300px;
    background:#222;
    margin:0 1% 0 1%;
}
@media screen and (max-width: 768px) {
    .two-col {
        width:100%;
        float:none;
        margin:0 0 15px 0;
    }
}

http://jsfiddle.net/145fbw6k/

Answer 3

您可以使用 Bootstrap 或 Foundation 来解决这个问题，您不必实现这些样式，而 Bootstrap/Foundation 有一个很好的网格系统供您使用。顺便说一句，我在代码片段中为您解决了这个问题。

/*--Kairo Jewell--*/

/*-CSS Stylesheet-*/
 * {
    box-sizing: border-box;
}
a {
    font-size:large;
    font-family:arial
}
a:link {
    color:#0077ff;
    background-color:transparent;
    text-decoration:none;
    font-weight:bold;
}
a:visited {
    color:#0077ff;
    background-color:transparent;
    text-decoration:none;
    font-weight:normal;
}
a:hover {
    color:red;
    background-color:transparent;
    text-decoration:underline;
}
a:active {
    color:red;
    background-color:pink;
    text-decoration:underline;
}
body {
    background-color:#e0e0e0;
    margin:0px;
}
h1 {
    font-family:impact;
    color:darkgreen;
}
p {
    font-family:arial;
    font-size:large;
    color:green;
    margin-top:0px;
    margin-bottom:0px;
}
.goog {
    background-color:white;
    color:#222222;
    margin:5px;
    padding:10px;
    box-shadow:0px 5px 10px #aaaaaa;
    clear:both;
}
.goog2 {
    padding: 0px 5px;
    width:50%;
    float:left;
}
.container {
    margin:0 auto;
    clear:both;
}
.wrap {
    position:center;
    margin:0px;
    width:auto;
    height:inherit;
}
.center {
    position:center;
    margin:0 auto;
}
#header, #footer {
    position:fixed;
    margin:0 auto;
    width:100%;
}
#header {
    z-index:99998;
    top:0px;
    height:50px;
    background-color:00aaaa;
}
#footer {
    bottom:0px;
    z-index:999999;
    height:20px;
}
#content {
    margin-top:75px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:50px;
    float:top;
    width:80%;
}
span.bad {
    font-size:120%;
    color:red;
}
span.dark {
    font-size:120%;
    color:darkgreen;
    font-weight:bold;
}
.swag-content {
    box-shadow:0px 5px 10px #aaaaaa;
    background-color:white;
    color:#222222;
}
@media screen and (max-width: 768px) {
    .goog2 {
        width: 100%;
        margin-bottom: 5px;
    }
}

<div id="content">
    <div class="goog">
        <p>Swag</p>
    </div>
    <div class="container">
        <div class="goog2">
            <div class="swag-content">
                <p>Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag</p>
            </div>
        </div>
        <div class="goog2">
            <div class="swag-content">
                <p>Swag2Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag</p>
            </div>
        </div>
    </div>
    <div class="container"></div>
    <div class="goog">
        <p>Swag
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>Swag</p>
    </div>
</div>

希望对您有所帮助

当浏览器缩小时，如何正确对齐两个相互折叠的 div？

How can I properly align two divs that fold atop each other when browser is shrinked?

html

css