2

我希望有人能回答这个问题，因为我的客户想要这个，现在我不知道如何在 CSS 中构建它。

有谁知道如何构建这样的东西？应该是这样的，如果您将图像向右对齐，您的文本将与图像很好地对齐。

在这里，我要做的是构建一个 div，在所有输入的文本周围创建一个边框，然后将其与图像对齐。我怎么能这样做？

在皮特的帮助下。

这里的问题是

box-shadow

此外，盒子需要在阶段后期透明。这是我现在的结果http://jsfiddle.net/peteng/cu59r/。

编辑：感谢您提供的所有答案和支持，以帮助我解决此 css 问题。

它应该发生的以下事情是：

  1. 看图片。
  2. 请参阅我发布的 jsfiddle 链接。
  3. 带有边框的内容需要一个 box-shadow、一个边框半径和一个渐变。
  4. 这需要是动态的。

再次感谢社区帮助我对我来说意义重大。

4

7 回答 7

3

通过使用几张图像，您应该能够创建您想要的内容

html

<div id="wrapper">
    <div id="imageHolder"><div class="inner"><img src="http://lorempixel.com/200/200" /></div></div>
    <!--put text here-->
    <p>Text</p>
</div>

css

#wrapper {width:400px; border-radius:10px; border-top-right-radius:0px; background-color:#7ab37a; overflow:auto; padding:15px;}
#imageHolder {float:right; margin:-15px -15px 0 0; background:#ffffff url(http://i.imgur.com/gMIy72D.gif) left top no-repeat;}
#imageHolder .inner {background:url(http://i.imgur.com/RLBbLYV.gif) right bottom no-repeat; padding:10px 10px 20px 20px;}

例子

更新

对您现在想要的内容进行所有编辑（而不是原始问题中的简单 l 形）。这是不可能的，原因如下

文本必须具有背景颜色，这意味着您需要主包装上的背景颜色，以便它可以形成 l 形。这意味着获得图像圆角所需效果的唯一方法是在包装背景上放置另一个背景（这意味着你不能有任何透明的东西，否则包装背景颜色会显示出来）

你能希望的最好的结果就是告诉客户，如果他们想要那种形状，他们必须将图像保持在精确的大小，并将它们的文本保持在特定的长度，然后你可以使用简单的背景图像

于 2013-06-14T09:08:32.067 回答
1

我认为没有一种简单的方法可以像这样设置文本框的样式。

我的建议：用 Photoshop 设计框，然后将其作为背景图像添加到两个不同的 div 中（文本框应该在图像所在的位置具有透明背景）。在此之后，您可以以正确的方式定位 div，如有必要，使用包装 div。

缺点：不响应、静态等

于 2013-06-14T08:32:27.757 回答
0

鉴于以下 HTML 结构，建议的进一步替代方案：

<div class="imgContainer">
    <img src="http://placekitten.com/150/150" />
    <p><!-- text excised for brevity --></p>
</div>

和 CSS：

.imgContainer {
    border: 1px solid #000;
    padding: 0;
    width: 80%;
    margin: 0 auto 1em auto;
    border-radius: 1em;
}

.imgContainer img {
    float: right;
    margin: -1px -1px 0 0;
    padding: 0 0 0.5em 0.5em;
    border: 1px solid #fff;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
}

.imgContainer p {
    margin: 0.5em;
    padding: 0;
    text-indent: 0.5em;
}

JS 小提琴演示。

这应该允许使用任何尺寸的图像（当然，只要它适合容器元素），并且可以响应并适应变化的尺寸。

但不幸的是，我想不出一种方法来在其img自身的边界上提供曲线。从好的方面来说，它避免了不必要的包装和重新包装元素，因此 HTML 本身可以而且应该保持相当精简。

于 2013-06-14T10:53:44.777 回答
0

您可以简单地浮动图像，它看起来像这样： http: //www.homeandlearn.co.uk/wd/images/chapter3/text_wrap_final.gif

只需添加

float: right/left;
margin: 0;

看看这是否有效。

于 2013-06-14T08:47:23.877 回答
0

Skull3r7 对background-images 有一个好主意。此外，可以使用两个带有（动态）文本的 div 和另一个带有“上边框”的 div。

  • 第一层包含文本作为“占位符”和“底部边框”，
  • 第二层包含“顶部边框图像”（覆盖第一层的顶部）
  • 第三层包含可见文本。

例子

然而，实现皮特的解决方案更容易，但我希望这个例子也能有所帮助。:)

于 2013-06-14T09:55:46.180 回答
0

在我看来，这是一个非常好的问题:)

我的简短回答是——是的，有可能——见皮特的回答。我理解这种情况的困难，并且我也理解这种解决方案缺乏灵活性的事实，因为它结合了 cssborder-radius和图像 - 所以 => a）它在 IE8 及以下版本中看起来很奇怪，b）如果我们看起来很奇怪更改一些CSS :)

我自己的答案是仅使用 css 来做到这一点，但主要问题将无法解决，靠近图像的角落不会以我知道的 css 中的任何方式被舍入。

考虑看看这个小提琴 - http://jsfiddle.net/skip405/m6cpb/1/

我更喜欢我的变体，因为它更灵活- 如果需要更改 - 只有 css 会改变，不需要重新制作任何其他颜色或不同半径的图像......根本不需要图像： ) 尽管您需要对浮动到左侧的图像进行不同的样式设置，并且还需要对文本中间的图像进行样式设置。

于 2013-06-14T09:48:17.230 回答
0

看到这个演示。这是你所期待的。

<figure style="float:right;">
于 2013-06-14T08:58:59.783 回答