Question

我正在努力应对以下情况。我很难以正确的方式描述它，因此我在Photoshop中创建了一个示例来说明情况。

请访问以下链接：http://websitedelivery.nl/files/example.png

一些解释：我正在使用图像作为网站背景的网站上工作。现在我需要创建两个内容区域，一个是大的，一个是小的，只显示在右上角，两个都包含文本。问题是大内容块中的文本需要在整个内容块中继续（部分位于顶部，全部位于底部）。

任何人都知道如何使用HTML和CSS实现这一目标？

提前致谢！

编辑：我看到很多人在右上方的区域周围使用边框，但不幸的是，他们不会这样做。它需要显示页面的背景图像。我已更新了我的图片，以便您可以看到我的意思：http://websitedelivery.nl/files/example1.png

Answer 1

你可以制作一个div，并使其内部的小块向右浮动。父级中的内容将环绕它。

HTML：

<div id="content">
    <div id="smallbox">smallbox with content</div>
    <p>... content ...</p>
</div>

CSS：

#content {
    border-radius: 10px;
    background: white;
    width: 600px;
    margin: 20px;
}
#smallbox {
    width: 200px;
    height: 75px;
    background: lightblue;
    float: right;
}

DEMO

根据您的需要进行调整。

[编辑]
改进版本，小方框中还有圆角边框：clickerdecklick。

Answer 2

这是一种方法：

JSFiddle：http://jsfiddle.net/S6tSL/

基本结构：

<section class="content">
    <aside>
        <div class="inner-border">Top right text...</div>
    </aside>
    The rest of the text...
</section>

CSS：

.content {
    border-radius: 5px;
    background-color: #fff;
    padding: 20px;
}
.content aside {
    margin: -30px -30px 20px 20px;
    border-radius: 5px;
    background-color: #aaa;
    float: right;
    padding: 10px;
}
.content aside .inner-border {
    border-radius: 5px;
    background-color: #fff;
    padding: 20px;
    width: 200px;
}

希望这能让你开始。

Answer 3

在编辑小提琴时，出现了许多其他答案，但我也会分享我自己的:)，

而其他人也有很好的答案，希望这个帮助

http://jsfiddle.net/hY9w3/3/

仅供参考：

body {
    background: url(http://hdpicstock.com/wp-content/uploads/2013/09/Beautiful-Nature-Wood-Images-HD-Wallpaper.jpg) no-repeat;
    font-family:Verdana;
    font-size:10px;
    overflow:hidden;
}

.clear{
    clear:both;
}

.wrapper {
    width:400px;
    margin: 15px auto; /* center the wrapper*/
}

.content-top-left{
    width: 70%;
    float: left;
    min-height: 66px;
    padding:10px;
    background:#fff;
    border-top-left-radius:5px;
}

.content-top-right{
    width: 30%;
    float: right;
    border-left:10px solid transparent;
    border-bottom:10px solid transparent;


}

.content-top-right-inner{
    background-color:#fff;
    padding:10px;
    border-bottom-left-radius:5px;
    border-top-right-radius:5px;
    min-height:20px;
}


.content-bottom{
    background-color: #fff;
    padding:10px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

.content-top-left, .content-bottom, .content-top-right{
    box-sizing: border-box;
}

 <div class="wrapper">

    <div class="content-top-left">
       Top left 
    </div>

    <div class="content-top-right">
        <div class="content-top-right-inner">
        Carentem sunt tuti tuba, Habitandae
        </div>
    </div>
    <div class="clear"></div>

    <div class="content-bottom">
        bottom content
    </div>

</div>

Answer 4

在发布的图片的基础上，我做了一个演示。你们很多人先检查 DEMO 。

CSS代码在这里

body {background:gold;}

.container{ 
background:#ffffff; 
broder-radius:5px; 
height:auto;  
overflow:hidden;
}

.container p{ padding:4px;}

.info{
float:right; 
background:#ffffff;  
border-radius: 8px;
padding:5px;
height:120px;
border:10px solid gold;
border-bottom-left-radius:10px;
border-bottom-right-radius:0px;
border-top-left-radius:0px;
border-top:0;
border-right:0;
}

HTML代码就像这样

<div class="container">
<div class="info">smallbox with content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate placerat augue, non dictum dolor semper in. Morbi vitae magna scelerisque, cursus dolor ac, tincidunt diam. Nulla iaculis turpis non consectetur vestibulum. Maecenas in magna ligula. Curabitur ornare auctor aliquam. Vestibulum mattis, felis bibendum molestie euismod, lacus orci ornare sapien, eget suscipit urna massa eu nunc. Mauris nulla tellus, aliquam eu ornare in, euismod quis enim. Cras vel aliquet neque. Suspendisse accumsan ante at molestie rutrum. Aliquam aliquet lacus nec nisi dignissim posuere.</p>
</div>

用透明填充在另一个div里面划分

4 个答案: