在DIV下方放置图片的问题

时间：2014-11-03 21:35:22

标签： html css

我怎么能把长颈鹿的照片放在下面橙色DIV？非常感谢

请参阅：http://jsfiddle.net/0qLevh83/7/

enter image description here 

  <img class="type-de-soins" src="http://lorempixel.com/output/animals-q-g-267-153-4.jpg">


.desc p {
  margin-bottom: 1em;
}

.desc {
  float: right;
  width: 40.8%;
  background-color: rgb(196, 196, 196);
}

.desc-box {
  position: absolute;
  z-index: 1;
  width: 350px;

  background-color: rgb(226, 96, 18);
}

.desc-box-text {
  float: left;
  padding-top: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(0, 0, 0);
}

.desc-soins {
  float: left;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(0, 0, 0);
}

.type-de-soins {
  display: block;
  position: relative;
  float: left;
  clear: both;
  z-index: 4;
  width: 179px;
  height: auto;
  margin-top: 13px;
  margin-left: 23.25%;
  overflow: hidden;
}

.desc-soins strong {
  font-style: normal;
  font-weight: 700;
}

2 个答案:

答案 0 :(得分：2)

您可以position: relative使用.desc-box clearfix代替absolute：

＆＃13;
＆＃13; 
$(document).ready(function() {

  $('.type-de-soin a:first').css({
    'background-color': '#B4D454',
    'color': '#fff'
  });

  $('.type-de-soin a').click(function() {
    var region = $(this).attr('data-region');

    $('.type-de-soin a').css({
      'background-color': '#fff',
      'color': '#3A7CDB'
    });
    $(this).css({
      'background-color': '#3A7CDB',
      'color': '#fff'
    });

    $('.textzone:visible').stop().fadeOut(500, function() {
      $('#' + region).fadeIn(500);
    });

    return false;

  });

});
＆＃13; 
#carte-des-soins {
  background: #ccc;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#carte-des-soins ul {
  list-style: none;
}
#carte-des-soins li {
  display: inline;
}
#description-des-soins {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
#soins-1,
#soins-2,
#soins-3,
#soins-4 {
  position: relative;
  float: left;
  margin-bottom: 30px;
  padding: 5px 20px 20px 20px;
  color: #333;
  font: 12px'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 400;
  line-height: 1px;
  background: red;
}
#soins-1 h3,
#soins-2 h3,
#soins-3 h3,
#soins-4 h3 {
  color: #3A7CDB;
  font-weight: 300;
  font-size: 18px;
}
#soins-2,
#soins-3,
#soins-4 {
  display: none;
}
#soins-2 p {
  margin-bottom: 5px;
}
#soins-1 p {
  margin-bottom: 5px;
  padding-right: 10px;
}
#soins-1 a {
  color: #3A7CDB;
  text-decoration: none;
}
#soins-1 a:hover {
  text-decoration: underline;
}
.desc p {
  margin-bottom: 1em;
}
.desc {
  float: right;
  width: 40.8%;
  background-color: rgb(196, 196, 196);
}
.desc-box {
  position: relative;/*change position to relative*/
  z-index: 1;
  width: 350px;
  float: left;/*use float left*/
  background-color: rgb(226, 96, 18);
}
.desc-box-text {
  float: left;
  padding-top: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(0, 0, 0);
}
.desc-soins {
  float: left;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(0, 0, 0);
}
.type-de-soins {
  display: block;
  position: relative;
  float: left;
  z-index: 4;
  width: 179px;
  height: auto;
  overflow: hidden;
}
.desc-soins strong {
  font-style: normal;
  font-weight: 700;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carte-des-soins">
  <ul>
    <li><span class="type-de-soin"><a href="#" data-region="soins-1"> Soins 1</a></span>

    </li>
    <li><span class="type-de-soin"><a href="#" data-region="soins-2"> Soins 2</a></span>

    </li>
    <li><span class="type-de-soin"><a href="#" data-region="soins-3"> Soins 3</a></span>

    </li>
    <li><span class="type-de-soin"><a href="#" data-region="soins-4"> Soins 4</a></span>

    </li>
  </ul>
</div>
<div id="description-des-soins">
  <div id="soins-1" class="textzone">
    <div class="desc-box clearfix">
      <p class="desc-box-text">Eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim. Quinta decima eodem modo typi qui nunc nobis videntur parum, clari fiant sollemnes. Nam liber tempor cum soluta nobis assum typi. Nulla facilisis at vero eros et
        accumsan et iusto odio dignissim qui. Eum iriure dolor in hendrerit in vulputate velit esse. Etiam processus dynamicus qui sequitur mutationem consuetudium lectorum mirum est. Claritatem Investigationes demonstraverunt lectores legere me lius,
        quod ii legunt.</p>
      <img class="type-de-soins" src="http://lorempixel.com/output/animals-q-g-267-153-4.jpg"><!-- move inside div --> 
    </div>
    <div class="desc clearfix">
      <div class="desc-soins">
        <p><strong>PHYT'S : soin visage Equilibre&nbsp;</strong>
          <br>60 min.&nbsp;</p>
        <p>Type de peaux : toute peau à équilibrer (grasse, mixte ou sèche). Soin du visage traditionnel, personnalisé selon le type de peau, qui vous fera retrouver une peau saine et un teint éclatant.&nbsp;</p>
        <p><strong>PHYT'S : soin visage Pureté active</strong>

          <br>60 min.&nbsp;</p>
        <p>Type de peaux : peaux grasses ou mixtes comédogènes. Soin spécifique visant à assainir le teint, éliminer les comédons et aider à réguler les excès de sébum. Ce soin s’effectue, de préférence par cure de 4 soins avec l’application au préalable
          d’une crème spécifique pendant quelques jours.&nbsp;</p>
        <p><strong>PHYT'S : soin visage Aqua Phyt's
</strong>
          <br>75 min.&nbsp;</p>
        <p>Soin très hydratant à l'Acide Hyaluronique d'origine végétale&nbsp;</p>
        <p><strong>PHYT'S : soin visage Capyl
</strong>
          <br>60 min.&nbsp;</p>
        <p>Type de peaux : peaux sèches à rougeurs diffuses, sensibles, fines. Soin calmant et décongestionnant, spécialement conçu pour les peaux sensibles ou à rougeurs diffuses.&nbsp;</p>
      </div>
    </div>
  </div>
  <div id="soins-2" class="textzone">
    <p>L'eau minérale</p>
  </div>
  <div id="soins-3" class="textzone">
    <p>Les personnes</p>
  </div>
  <div id="soins-4" class="textzone">
    <p>Les fgd</p>
  </div>
</div>
<p></p>
<br>
<p></p>
<br>
<p></p>
<br>
＆＃13;
＆＃13;
＆＃13;

如果你不能改变html结构，那么使用纯css：

＆＃13;
＆＃13; 
#carte-des-soins {
  background: #ccc;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#carte-des-soins ul {
  list-style: none;
}
#carte-des-soins li {
  display: inline;
}
#description-des-soins {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
#soins-1,
#soins-2,
#soins-3,
#soins-4 {
  position: relative;
  float: left;
  margin-bottom: 30px;
  padding: 5px 20px 20px 20px;
  color: #333;
  font: 12px'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 400;
  line-height: 1px;
  background: red;
}
#soins-1 h3,
#soins-2 h3,
#soins-3 h3,
#soins-4 h3 {
  color: #3A7CDB;
  font-weight: 300;
  font-size: 18px;
}
#soins-2,
#soins-3,
#soins-4 {
  display: none;
}
#soins-2 p {
  margin-bottom: 5px;
}
#soins-1 p {
  margin-bottom: 5px;
  padding-right: 10px;
}
#soins-1 a {
  color: #3A7CDB;
  text-decoration: none;
}
#soins-1 a:hover {
  text-decoration: underline;
}
.desc p {
  margin-bottom: 1em;
}
.desc {
  position: relative;
  width: 40.8%;
  background-color: rgb(196, 196, 196);
  float: right;
  margin-top: -225px;
}
.desc-box {
  position: relative;
  z-index: 1;
  width: 350px;
  float: left;
  background-color: rgb(226, 96, 18);
}
.desc-box-text {
  float: left;
  padding-top: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(0, 0, 0);
}
.desc-soins {
  float: left;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(0, 0, 0);
}
.type-de-soins {
  display: block;
  position: relative;
  float: left;
  z-index: 4;
  width: 179px;
  height: auto;
  overflow: hidden;
  clear: left;
}
.desc-soins strong {
  font-style: normal;
  font-weight: 700;
}
＆＃13; 
<div id="carte-des-soins">
  <ul>
    <li><span class="type-de-soin"><a href="#" data-region="soins-1"> Soins 1</a></span>

    </li>
    <li><span class="type-de-soin"><a href="#" data-region="soins-2"> Soins 2</a></span>

    </li>
    <li><span class="type-de-soin"><a href="#" data-region="soins-3"> Soins 3</a></span>

    </li>
    <li><span class="type-de-soin"><a href="#" data-region="soins-4"> Soins 4</a></span>

    </li>
  </ul>
</div>
<div id="description-des-soins">
  <div id="soins-1" class="textzone">
    <div class="desc-box clearfix">
      <p class="desc-box-text">Eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim. Quinta decima eodem modo typi qui nunc nobis videntur parum, clari fiant sollemnes. Nam liber tempor cum soluta nobis assum typi. Nulla facilisis at vero eros et
        accumsan et iusto odio dignissim qui. Eum iriure dolor in hendrerit in vulputate velit esse. Etiam processus dynamicus qui sequitur mutationem consuetudium lectorum mirum est. Claritatem Investigationes demonstraverunt lectores legere me lius,
        quod ii legunt.</p>

    </div>
    <img class="type-de-soins" src="http://lorempixel.com/output/animals-q-g-267-153-4.jpg" />
    <div class="desc clearfix">
      <div class="desc-soins">
        <p><strong>PHYT'S : soin visage Equilibre&nbsp;</strong>
          <br>60 min.&nbsp;</p>
        <p>Type de peaux : toute peau à équilibrer (grasse, mixte ou sèche). Soin du visage traditionnel, personnalisé selon le type de peau, qui vous fera retrouver une peau saine et un teint éclatant.&nbsp;</p>
        <p><strong>PHYT'S : soin visage Pureté active</strong>

          <br>60 min.&nbsp;</p>
        <p>Type de peaux : peaux grasses ou mixtes comédogènes. Soin spécifique visant à assainir le teint, éliminer les comédons et aider à réguler les excès de sébum. Ce soin s’effectue, de préférence par cure de 4 soins avec l’application au préalable
          d’une crème spécifique pendant quelques jours.&nbsp;</p>
        <p><strong>PHYT'S : soin visage Aqua Phyt's
</strong>
          <br>75 min.&nbsp;</p>
        <p>Soin très hydratant à l'Acide Hyaluronique d'origine végétale&nbsp;</p>
        <p><strong>PHYT'S : soin visage Capyl
</strong>
          <br>60 min.&nbsp;</p>
        <p>Type de peaux : peaux sèches à rougeurs diffuses, sensibles, fines. Soin calmant et décongestionnant, spécialement conçu pour les peaux sensibles ou à rougeurs diffuses.&nbsp;</p>
      </div>
    </div>
  </div>
  <div id="soins-2" class="textzone">
    <p>L'eau minérale</p>
  </div>
  <div id="soins-3" class="textzone">
    <p>Les personnes</p>
  </div>
  <div id="soins-4" class="textzone">
    <p>Les fgd</p>
  </div>
</div>
<p></p>
<br>
<p></p>
<br>
<p></p>
<br>
＆＃13;
＆＃13;
＆＃13;

还要在代码中查看我的评论。

答案 1 :(得分：1)

将图像放在＆lt; p class =＆＃34; desc-box-text＆＃34; ＆GT;但在里面＆lt; div class =＆＃34; desc-box＆＃34; ＆GT;

应该是这样的

<div class="desc-box ">

    <p class="desc-box-text">Eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim. Quinta decima eodem modo typi .......</p>

    <img class="type-de-soins" src="http://lorempixel.com/output/animals-q-g-267-153-4.jpg">

</div>
相关问题
最新问题