当前位置：文江博客话题详情

将两个 div 置于 div 中：一个固定宽度，另一个可变宽度/高度

发布于 2024-12-26 05:41:07 字数 671 浏览 7 评论 0原文

我遇到的情况是，我有一个固定宽度的 div，包含从 Twitter 中提取的图像，以及另一个包含可变长度的用户文本的可变宽度的 div。我想要实现的目标如下：

在此处输入图像描述

我可以用单个 div 具有 background-image 和 padding-left。但我希望能够将 border-radius 应用于 img 元素，而这对于 background-image 来说是不可能的。

如果我在外部 div 上执行 text-align: center ，它就会到达一半。 这是一个演示和屏幕截图：

在此处输入图像描述

但这显然不完全是我想要的。

我怎样才能做到这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

川水往事 2025-01-02 05:41:07

询问，您将收到 - 一个简化的 jsFiddle 示例：

jsFiddle Screenshot

作为额外的好处，文本也垂直居中！

HTML：

<div class="logo">
    <div class="logo-container">
        <img src="http://img.tweetimag.es/i/appsumo_b.png" />
    </div>

    <div class="logo-name">
        AppSumo is a really really long title that continues down the page
    </div>
</div>

CSS：

.logo {
    background-color: #eee;
    display: table-cell;
    height: 100px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 600px;
}

.logo-container {
    background-color: #fff;
    border-radius: 10px;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 75px;
}

.logo-name {
    font: bold 28px/115% Helvetica, Arial, sans-serif;
    padding-left: 85px;
}

Ask and you shall receive — a simplified jsFiddle example:

jsFiddle Screenshot

As an added bonus, the text is vertically centered too!

HTML:

<div class="logo">
    <div class="logo-container">
        <img src="http://img.tweetimag.es/i/appsumo_b.png" />
    </div>

    <div class="logo-name">
        AppSumo is a really really long title that continues down the page
    </div>
</div>

CSS:

.logo {
    background-color: #eee;
    display: table-cell;
    height: 100px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 600px;
}

.logo-container {
    background-color: #fff;
    border-radius: 10px;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 75px;
}

.logo-name {
    font: bold 28px/115% Helvetica, Arial, sans-serif;
    padding-left: 85px;
}

回复收藏 0 原文

愛上了 2025-01-02 05:41:07

会是这样的吗？
http://jsfiddle.net/uPPTM/6/

.logo {
    width:80%;
    margin:auto;
    background-color: red;
}
.logo-container {
    border: 1px solid gold;
    width:73px;
    height: 73px;
    display: inline-block;
    vertical-align:middle; 
}
.logo-name {
    display: inline-block;
}

Would it be something like this?
http://jsfiddle.net/uPPTM/6/

.logo {
    width:80%;
    margin:auto;
    background-color: red;
}
.logo-container {
    border: 1px solid gold;
    width:73px;
    height: 73px;
    display: inline-block;
    vertical-align:middle; 
}
.logo-name {
    display: inline-block;
}

回复收藏 0 原文

绿阴红影里的.如风往事 2025-01-02 05:41:07

您可以将图像容器（或没有容器的图像本身）向左浮动，清除左侧的所有内容...然后将文本浮动到左侧，清除右侧的所有内容。

.logo-container{
    float:left;
    clear:left;
}
.logo-name{
    float:left;
    clear:right;
}

您可以使用边距调整文本的距离。

.logo-name{
    float:left;
    clear:right;
    margin-top:10px;
    margin-left:5px;
}

You can float the image container (or image itself without the container) to the left, clearing anything the left... and then float the text to the left, clearing anything to the right.

.logo-container{
    float:left;
    clear:left;
}
.logo-name{
    float:left;
    clear:right;
}

You can adjust the distance of the text using margins.

.logo-name{
    float:left;
    clear:right;
    margin-top:10px;
    margin-left:5px;
}

回复收藏 0 原文

格子衫的從容 2025-01-02 05:41:07

使用左侧位置的绝对定位将标题文本推过图像。

http://jsfiddle.net/uPPTM/9/

.logo { width: 50px; }
.title { 
    position: absolute; 
    top: 0;
    left: 50px;
    font-size: 32px; 
    text-align: center; 
}
img {
    border: 1px solid gray;
    border-radius: 15px;
}

<div class="logo">
    <div class="logo-container">
        <img src="http://img.tweetimag.es/i/appsumo_b.png">
    </div>
    <div class="logo-name">AppSumo</div>
</div>

Use absolute positioning with a left position to push the title text past the image.

http://jsfiddle.net/uPPTM/9/

.logo { width: 50px; }
.title { 
    position: absolute; 
    top: 0;
    left: 50px;
    font-size: 32px; 
    text-align: center; 
}
img {
    border: 1px solid gray;
    border-radius: 15px;
}

<div class="logo">
    <div class="logo-container">
        <img src="http://img.tweetimag.es/i/appsumo_b.png">
    </div>
    <div class="logo-name">AppSumo</div>
</div>

回复收藏 0 原文

~没有更多了~