将Div包裹在段落标签中
[英]Wrap Div in paragraph tag
问题描述
The div within the paragraph tag does not wrap in the paragraph tag. 
段落标记中的div不包含在段落标记中。 How do I achieve it to wrap? 如何实现包装？ It floated into a new paragraph instead of being aligned within the <p> tag. 它浮动到一个新的段落中，而不是在<p>标记中对齐。
<head> <style> #wrapper { width: 100%; margin: 0 auto; } #leftcolumn, #rightcolumn { border: 1px solid white; float: left; min-height: 100%; -webkit-box-shadow: 0px 1px 9px -1px rgba(0, 0, 0, 0.94); -moz-box-shadow: 0px 1px 9px -1px rgba(0, 0, 0, 0.94); box-shadow: 0px 1px 9px -1px rgba(0, 0, 0, 0.94); } #leftcolumn { width: 75%; } #rightcolumn { width: 25%px; } .inner-divs { height: 50px; width: 250px; -webkit-box-shadow: -1px 1px 9px -1px rgba(0, 0, 0, 0.94); -moz-box-shadow: -1px 1px 9px -1px rgba(0, 0, 0, 0.94); box-shadow: -1px 1px 9px -1px rgba(0, 0, 0, 0.94); } #img { max-width: 100%; max-height: 100%; margin: auto; display: block; padding-left: 10px; } #div-embed { height: 50px; width: 50px; background-color: #27d6bf; } </style> </head> <body> <div> <div id="leftcolumn"> </div> <div id="rightcolumn"> <p class="inner-divs"> <div id="div-embed"><img id="img" src="C:\\Users\\ken4ward\\Desktop\\Tidy\\edit.jpg"></div> </p> <p class="inner-divs"> <div id="div-embed"><img id="img" src="C:\\Users\\ken4ward\\Desktop\\Tidy\\garbage_delete.png"></div> </p> <p class="inner-divs"> <div id="div-embed"><img id="img" src="C:\\Users\\ken4ward\\Desktop\\Tidy\\update.jpg"></div> </p> <p class="inner-divs"> <div id="div-embed"><img id="img" src="C:\\Users\\ken4ward\\Desktop\\Tidy\\zoom_icon.jpg"></div> </p> </div>
1 个解决方案
解决方案1
0 2015-12-13 01:45:07
A <div> by default is a block element (as opposed to inline elements). 默认情况下， <div>是块元素（与内联元素相反）。 The same goes for <p> elements. <p>元素也是如此。
If you want to wrap something inside a <p> element (or any other block element), use the <span> tag, which by default is an inline element. 如果要在<p>元素（或任何其他块元素）中包装某些内容，请使用<span>标记，该标记默认为内联元素。
BUT: You can change any elements appearance by defining another setting for it's display parameter: 但是：您可以通过定义其display参数的另一种设置来更改任何元素的外观：
.my_class { display: inline-block; }
will make the div with class " .my_class appear in one line with the surrounding content. The same goes for display: inline 将使类为“ .my_class的div与周围的内容显示在一行中。 display: inline内容也是如此display: inline
For more details see http://www.w3schools.com/cssref/pr_class_display.asp 有关更多详细信息，请参见http://www.w3schools.com/cssref/pr_class_display.asp
PS: In your case you could probably simply leave the div tags out and just use the images as they are, inside the <p> tags. PS：就您而言，您可以简单地将div标签留在外面，而直接在<p>标签内使用图像。 You can still style those with a CSS rule like 您仍然可以使用CSS规则来设置样式
p.xxx1 img { bottom: 1px; height: 0.8 em; width: auto; }
in order to raise each image by one px and adjust it's size ( .xxx1 in this example would be the class that you include in the <p> tag. 为了将每个图像提高一个像素并调整其大小（此示例中的.xxx1将是您包含在<p>标记中的类。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.