我如何制作＆＃34; box-shadow＆＃34;整个div

Question

我想在左边显示图像并在旁边显示文字，但我想在图像后面显示框阴影，怎么做？

HTML

<div class="image_carousel">
<img src="https://lh5.googleusercontent.com/-        vp16kljkPwg/AAAAAAAAAAI/AAAAAAAAAKg/Ypz8rdBRFjQ/photo.jpg?sz=200"  alt=""/>
<p>
hello there the angel
</p>
</div>

CSS

.image_carousel {
  margin-top: 20px;
  box-shadow: 0px 0px 3px #000;
}
.image_carousel img{
  float:left;
 }

Answer 1

你可能需要这个：

.image_carousel {
  margin-top: 20px;
  box-shadow: 0px 0px 3px #000;
}
.image_carousel img{
  float:left;
  width: 60px;
 }
 
 .image_carousel p{
  float:left;
 }
 
 .clear {
   clear: both;
 }

<div class="image_carousel">
<img src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1"  alt=""/>
<p>
hello there the angel
</p>
<div class="clear"></div>
</div>

Answer 2

您可以通过添加div作为文字的包装，然后将box-shadow应用于image_carousel来应用于内部元素。

HTML：

<div class="image_carousel">
<img src="http://3.bp.blogspot.com/-NN2h0whe9D4/Tc4y4i54GAI/AAAAAAAAGt0/ZrKTEZ30wAQ/s1600/windows_7_logo_from_wallpaper.png"  alt=""/>
<div class="content">
<p>
hello there the angel
</p>
</div>
</div>

CSS：

.image_carousel {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}
.image_carousel .content{
  display: block;
  width: 100%;
  box-shadow: 0px 0px 3px #000;
}
.image_carousel img{
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 3px #000;
 }

小提琴：https://jsfiddle.net/8dj4sf12/1/

Answer 3

你应该将所有东西都包装在一个有阴影的div中。

<div class="container">
  <div class="image-caroussel>
  etc etc..
</div>

然后在容器上做框阴影：

.container { box-shadow: 0px 3px 3px #000; }

希望这会有所帮助：）