Question

我试图让图像浮动到我的div右侧，边缘周围有一点空间。我希望图像填充div的大部分，但是在它下面的链接'view project'有空间。我尝试了不同的花车，宽度，甚至调整了填充但仍然无法使其工作。谁能告诉我如何纠正这个问题？提前谢谢了。如果需要，这是页面链接：http://me14ch.leedsnewmedia.net/portfolio/design.html

HTML：

<div id="middle">

    <div class="section group">
        <div class="block-1">
        <h2>Logo Redesign & Style Guide</h2>
        <p><h3>This brief involved...</h3></p>
        <div class="snapshot">
        <a href="portfolioresources/styleguide.pdf"><img src="portfolioresources/scenelogo.png"></a>
        <a href="portfolioresources/styleguide.pdf" target="_blank">View Project</a>

        </div></div>

        <div class="block-2">
        <h2>TV Idents</h2>
        <p>This brief involved...</p>
        <a href=".....pdf" target="_blank">View Project</a>
        </div>
     </div>

     <div class="section group">
    <div class="block-3">
        <h2>Web Banners</h2>
        <p>This brief involved...</p>
        <a href=".....pdf" target="_blank">View Project</a>
        </div>

    <div class="block-4">
        <h2>Multiformat Campaign</h2>
        <p>This brief involved...</p>
        <a href=".....pdf" target="_blank">View TV Idents</a>
        </div>
 </div>
</div>

这个特定位的CSS（虽然inspect元素可能会显示影响我的div的其他东西）：

    /* design page grids */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.colu {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.colu:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWO  */
.span_2_of_2 {
    width: 100%;
}
.span_1_of_2 {
    width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .colu { 
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .span_2_of_2, .span_1_of_2 { width: 100%; }
}

/* style grids  */

#middle {
    width: 90%; 
    margin: 0px auto;
    padding: 10px;
}

.block-1 {
    background-color:#ECECEC;
    width: 80%;
    margin: 0px auto;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    height: 200px;
    padding: 10px;

}

.block-2 {
    background-color: white;
    width: 80%;
    margin: 0px auto;
    margin-top: 20px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border-top: 2px solid #FADBC8;
    border-bottom: 2px solid #FADBC8;
    height: 200px;
    padding: 10px;

}

.block-3 {
    background-color:#ECECEC;
    width: 80%;
    margin: 0px auto;
    margin-top: 20px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    height: 200px;
    padding: 10px
}


.block-4 {
    background-color: white;
    width: 80%;
    margin: 0px auto;
    margin-top: 20px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border-top: 2px solid #FADBC8;
    border-bottom: 2px solid #FADBC8;
    height: 200px;
    padding: 10px;

}

.block-1 img {
    height: 140px;
    float: right;
    clear: both;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);    
}

.snapshot a {
    float: right;
    text-decoration:underline;
    font-family: "Raleway";
}

Answer 1

在快照类

中执行此操作

<div class="snapshot">
        <a href="portfolioresources/styleguide.pdf"><div class="wrap" ><img src="portfolioresources/scenelogo.png"></div></a>
        <a href="portfolioresources/styleguide.pdf" target="_blank">View Project</a>

        </div></div>

并将其添加到ur css文件中以对错误进行排序

.wrap{
     padding:2px;
}

Answer 2

虽然自己做这些事情肯定是有用的，所以你可以先学习绳索和内部工作，一定要在将来使用css框架（比如bootstrap），这样你就可以快速解决这些问题。

<div class="view-project">

<img ... />

<span>View Project</span>

</div>

在你的css中：

.view-project{ float: right; width:300px; padding:40px; }
.view-project img,.view-project span{ display:block; }

Answer 3

一个建议：如果你希望你的图像位于div的右侧，并且视图项目位于下方，我认为你应该将它们包含在另一个div中。像这样：

   <div class="snapshot">
        <div>
            <a href="portfolioresources/styleguide.pdf"><img src="portfolioresources/scenelogo.png"></a>
            <a href="portfolioresources/styleguide.pdf" target="_blank">View Project</a>
    </div>
           </div>

然后向右浮动该div并移除所有其他浮动。

如果您希望图片位于视图项目之上，请将display: block;设置为“a”元素。

Answer 4

您至少需要为快照定义宽度。通过使快照的宽度等于图像的宽度，这将没有留下链接的空间，并将强制它下降到图像下方。删除图像和链接上的任何浮动，而不是将快照浮动到右侧

如何让我的图像浮动到我的div右侧？

4 个答案: