Question

我有一页文字，其格式与此类似

<div class="container">
    <p style="text-align: center;">
        <span style="text-decoration: underline;">
            <strong>
                <img src="//cdn.shopify.com/s/files/1/0652/9219/files/Horizontal.jpg?13817493546805475501" alt="">
            </strong>
        </span>
    </p>
    <p style="text-align: center;">
        <span style="text-decoration: underline;">
            <strong>The Hosting</strong>
        </span>
    </p>
    <p>
        The in-laws are arriving, friends are in town, and everyone is heading to your abode for a night filled with holiday cheer. As stress levels tend to rise during these events, expenses do as well. Here are a few tips to nail your hostess game, without breaking the bank and <em>still</em> shopping consciously. 
    </p>
</div>

我希望保持适合类容器的整个内容宽度的图像相同但仅将段落标记内的文本更改为较小的宽度（因此它看起来在两侧缩进）或具有边距但是根本不影响图像。我无法改变代码的输出方式，因此图像将始终包含在段落标记中。

此代码是内容页面上的一个小样本，并且始终有多个图像和文本。

所以基本上我在css中寻找一种方式来只设置段落标签中的实际文本并保持图像不变。任何帮助都会很棒。

这是一个小提琴示例：https://jsfiddle.net/jpautt8v/

Answer 1

如果您的html是静态的，或者您知道要修改哪个孩子，那么您可以简单地使用第n个子css选择器在示例代码案例中应用类似于第3个的css。你可以玩边缘，看看什么最适合你的解决方案。

Object {readyState: 1}
VM3689:10 Object {type: "FeatureCollection", totalFeatures: 386, features: Array[386], crs: Object}
VM3689:11 Uncaught TypeError: Cannot read property 'addData' of undefinedgetJson @ VM3689:11c @ jquery.min.js:3p.fireWith @ jquery.min.js:3k @ jquery.min.js:5r @ jquery.min.js:5
VM3689:10 Object {type: "FeatureCollection", totalFeatures: 377, features: Array[377], crs: Object}
VM3689:11 Uncaught TypeError: Cannot read property 'addData' of undefined

Answer 2

在不更改任何现有标记的情况下，您可以使用负边距完成所需的操作。

这样的事情会起作用：

img {
  width: 120%; max-width: 120%;
  margin: 0 -10%;
}

.content > div, .content > p {
  margin: 0 10%;
}

你可以看到它在这个小提琴中起作用：https://jsfiddle.net/igor_9000/jpautt8v/1/

段落标记

2 个答案: