1

I am having great difficulty in placing a line of text directly underneath a div. Just so you under stand or can picture my code, the div contains an image pulled from my database and the users first and last name is also pulled but sits under the image. I hope this explains the following:

 <div id="latest">
    <?php 
        $query = 'SELECT f.*, m.firstname AS firstname, m.lastname AS lastname FROM folio AS f, members AS m WHERE f.userid = m.id ORDER BY dateadded DESC';
        $result = mysqli_query($connection, $query);
        if(!$result){
            die('Database error: '.mysqli_error($connection));
        }
        while($row = mysqli_fetch_assoc($result)){
            ?>
    <a href="#inline1" style="text-decoration:none;" class="fancybox" >
    <div class="outimgbox"> <a style="text-decoration: none;" class="fancybox fancybox.ajax" rel="gallery<?php echo $row['userid']; ?>" data-fancybox-type="ajax" href="profile_image_fancybox.php?imgid=<?php echo $row['imgid']; ?>">
      <div id="mainwrapper">
        <div id="box-3" class="box"> <img class="uploads"  src="uploads/folio/<?php echo $row['filename']; ?>" /> <span class="caption fade-caption">
          <h3><?php echo $row['title']; ?></h3>
          <p style="color: #2d2d2d; font-size: 12px; padding-left:2px; text-decoration: none;"><?php echo 'by' ."&nbsp;". $row['firstname'] ."&nbsp;". $row['lastname'];  ?></p>
          </span> </div>
      </div>
      </a> </div>
        <p>
            <?php echo 'by' ."&nbsp;". $row['firstname'] ."&nbsp;". $row['lastname'];  ?>
        </p>
    <?
        }
        ?>
  </div>
</div>

As requested here is the css:

    img.uploads{padding: 0;
        margin-left: -25%;
        max-height:100%;
        }


    img.uploads:hover{
        opacity: .4;
        -webkit-transition: opacity;
        -webkit-transition-timing-function: ease-out;
        -webkit-transition-duration: 1000ms;
    }

    #mainwrapper {
}

/* Image Box Style */
#mainwrapper .box {
    width: 200px;
    height: 200px;
    border:10px solid #fff;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    -moz-box-shadow: 0 0 5px #d9d9d9;
    -webkit-box-shadow: 0 0 5px #d9d9d9;
    box-shadow: 0 0 5px #d9d9d9;
    float: left;
    position: relative;
    overflow: hidden;
        cursor:pointer;

}
#mainwrapper .box img {
    position: absolute;
    left: 0;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out;

}

/* Caption Common Style */
#mainwrapper .box .caption {
    background-color: rgba(255,255,255,0.95);
    position: absolute;
    color: #2d2d2d;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out;
    left: 0;
}


/** Caption 3: Fade **/
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption  {
    opacity: 0;
    width: 231px;
    height: 231px;
    text-align: justify;
    padding: 15px;
}


#mainwrapper .box .scale-caption h3 {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    -ms-transition-delay: 300ms;    
    transition-delay: 300ms;
}

#mainwrapper .box .scale-caption p {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    -ms-transition-delay: 500ms;    
    transition-delay: 500ms;
}


/** Fade Caption :hover Behaviour **/
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption  {
    opacity: 1;
}


#mainwrapper .box:hover .scale-caption h3, #mainwrapper .box:hover .scale-caption p {
    -moz-transform: translateX(200px);
    -o-transform: translateX(200px);
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
}
4

4 回答 4

1

你的代码有很多问题。
首先，您在 image 和p之间有一个h3。 其次，您为p制作一个span容器。 在该设置下，您尝试实现的目标是不可能的，并且您的代码验证也将是不可能的。 尝试这样的事情：


 
  <div id="box-3" class="box"> 
   <h3><?php echo $row['title']; ?></h3>
   <p>
    <img class="uploads"  src="uploads/folio/" />
   </p>
   <p id="whatever" style="color: #2d2d2d; font-size: 12px; padding-left:2px; text-decoration: none;">
   <?php echo 'by' ." ". $row['firstname'] ." ". $row['lastname'];  ?>
  </p>
 </div>

然后，像这样简单地设置它：

 
   .box-3 p{margin: 0; padding: 0;}
   #whatever{display: none;} /* this will hide the names by default */
   .box-3:hover #whatever{display: block;} /* this should resolve your issue */

这将删除两个p之间的所有空格，并且文本将位于图像下方（只要图像也没有任何填充或边距）。

希望解释清楚，答案有帮助。

于 2013-07-24T22:45:54.427 回答
1

图像后面的跨度元素把事情搞砸了。您需要将图像和以下文本包装在块级元素中。您可以使用 div （如果您使用 html5，则可以使用 figure 和 figcaption）。

于 2013-07-24T22:23:53.100 回答
1

由于您在 '#mainwrapper .box' 上使用了 'float'，因此如果您希望元素出现在下方而不是侧面，则需要使用 'clear:left'。

例子：

html:

<div class="float">
    ...
</div>

<p class="clear">
    ...
</p>

CSS：

.float { width: 30%; float: left; }

.clear { clear: left; }
于 2013-07-24T22:50:29.943 回答
1

我认为 Whistletoe 的意思是这样的。用 div 替换跨度，因为你不希望它在同一行，对吧？

<div id="mainwrapper">
    <div id="box-3" class="box">
        <img class="uploads"  src="uploads/folio/<?php echo $row['filename']; ?>" />
        <div class="caption fade-caption">
            <h3><?php echo $row['title']; ?></h3>
            <p style="color: #2d2d2d; font-size: 12px; padding-left:2px; text-decoration: none;"><?php echo 'by' ."&nbsp;". $row['firstname'] ."&nbsp;". $row['lastname'];  ?></p>
        </div>
    </div>
</div>
于 2013-07-24T22:30:36.520 回答