在段落标签中包裹Div

问题描述 投票:0回答:1

段落标记中的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 not wrapping

html css3 alignment
1个回答
0
投票

默认情况下,<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并调整它的大小(.xxx1in这个例子将是你在<p>tag中包含的类。

© www.soinside.com 2019 - 2024. All rights reserved.