段落标记中的div不会包含在段落标记中。如何实现它包装?它浮动到一个新的段落,而不是在<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>
默认情况下,<div>
是一个块元素(与内联元素相对)。 <p>
元素也是如此。
如果要在<p>
元素(或任何其他块元素)中包装某些内容,请使用<span>
标记,该标记默认为内联元素。
但是:您可以通过为其display
参数定义另一个设置来更改任何元素外观:
.my_class { display: inline-block; }
将使用“.my_class
”类的div与周围内容一起出现。对于display: inline
也是如此
有关更多详细信息,请参阅http://www.w3schools.com/cssref/pr_class_display.asp
P.S。:在你的情况下,你可能只是简单地将div标签留下来,只是在<p>
tags里面使用原样。您仍然可以使用CSS规则设置样式
p.xxx1 img { bottom: 1px; height: 0.8 em; width: auto; }
为了将每个图像提高一个px并调整它的大小(.xxx1
in这个例子将是你在<p>
tag中包含的类。