Question

我遇到了一个我遇到的问题。我正在使用grid.css文件。未提及的类是空的。

所以问题是当有3列图像时（以像素为单位）在主要文章区域中真的很大。它们超过了容器的大小。并进入SIDEBAR区域。我该如何解决这个问题？

我希望我能够清楚，如果不让我知道，我会解决它。 :)

编辑我想出了这个问题。我不得不将此添加到CSS中，现在图像不会超过它们的大小。

.related articles img{
    width: 100%;
}

这样就可以了。

<section class="article">
    <div class="row">
         <!--MAIN ARTICLE AREA-->
        <div class="col span-2-of-3 col-left">
            <div class="related-articles">
                <div class="col span-1-of-3">
                    <a href="#">
                        <img src="img/test_img.jpg" alt="test-img">
                        <h3>This is a test article, I'm just trying out new things and lets see how this goes.</h3>
                    </a>
                </div>

                 <div class="col span-1-of-3">
                    <a href="#">
                        <img src="img/test_img.jpg" alt="test-img">
                        <h3>This is a test article, I'm just trying out new things and lets see how this goes.</h3>
                    </a>
                </div>

                 <div class="col span-1-of-3">
                    <a href="#">
                        <img src="img/test_img.jpg" alt="test-img">
                        <h3>This is a test article, I'm just trying out new things and lets see how this goes.</h3>
                    </a>
                </div>
            </div>
        </div>
        <!--SIDEBAR STARTS-->
        <div class="col span-1-of-3 col-right">

        </div>

    </div>
</section>

和CSS

.row{
max-width: 1140px;
margin: 0 auto;
}

.article .col {
    display: block;
    float:left;
    margin: 0.5% 0 0.5% 0;
}

.span-2-of-3 {
    width: 66.13%; 
}

.span-1-of-3 {
    width: 32.26%; 
}

.col-left{
    border-top: 2px solid #f5f5f5;
    float: left;
}

.col-right{
    float: right;
/*THE HEIGHT AND COLOR IS JUST SO I KNOW HOW IT WILL LOOK*/
    height:800px; 
    color:aqua;
}

Answer 1

<强>的jsfiddle：

https://jsfiddle.net/ua7o3pf9/

更正后的代码：

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1%;
}

.span-2-of-3 {
    width: 64.6%; 
}

.span-1-of-3 {
    width: 31.6%; 
}

您计算的宽度和边距为false。为你修好了。它必须是100％或更低。

修改：

还为您修复了侧边栏颜色：https://jsfiddle.net/ua7o3pf9/1/

编辑2：已编辑问题的固定代码：

小提琴：

https://jsfiddle.net/ua7o3pf9/9/

代码：

<div class="related-articles article">

您忘记添加课程article，这就是float:left未添加到您的列中的原因。

Answer 2

将.col样式更改为：

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1%;
}

元素超出其父容器

2 个答案: