2

我在将两个元素放在容器内的同一行时遇到问题。我想我最好向你展示我的意思： http: //fillobottosw.altervista.org/

展开后，右侧会显示一种描述，但在框外，而不是显示在灰色边框内。这是我到目前为止所写的：

代码

<div class="tile">
                  <div id="main" width="509" style="float: left;">
                    <img src="images/rbf.png" width="509" height="188">                 
                  </div>

                  <div id="second" width="509" style="float: left;">
                     <p class="description">...text...</p>         
                  </div>

</div>

CSS 代码

p.description {
    display: none;
    color: #999;
    float:right; 
    margin-left: 520px;
}

.tile {
    border-style:solid;
    border-color: #999;
    border-width: 1px;

    height: 188px;
    width: 509px;

    margin-right: auto;
    margin-left: auto;

}

JAVASCRIPT（用于扩展）

$('.tile').hover(   
  function() {  
        $(this).filter(':not(:animated)').animate({ width: '1100px'}, 600, 'swing',
             function() { $(this).find('.description').fadeIn(700);
         });
  },
  function() {  
     $(this).find('.description').hide();
     $(this).animate({width: '509px'}, 200);  

  }
);

你能告诉我我一直在做的错误吗？提前致谢

4

3 回答 3

1

所以只是快速浏览一下，看起来你应该添加/删除以下内容

.second
{
  float: right;
  width: 509px;
}

然后删除

margin-left: 520px

来自 p.description 所以 p.description 应该是

p.description
{
  display: none;
  color: #999;
  float: right;
}

然后在描述中添加一些填充或其他内容以使其坐得更好，

希望这会有所帮助:)

附言

主 div 应该向左浮动，第二个应该向右浮动，不需要显示：inline-block

于 2013-06-19T12:21:27.137 回答
0

我无法修复您的代码，因此我将 .description 定位为相对于 .tile 并且它可以工作。
而且我还观察到，如果 .description 的内容只是一个词，那么您的代码似乎可以工作。不知道为什么。无论如何，这里是编辑代码的 codepen 页面。

于 2013-06-19T12:25:57.200 回答
0

您的 HTML 和 CSS 存在一些问题。一方面，您有多个具有相同id值的元素。您可能应该将这些切换到类，或者id为每个元素创建一个唯一值。在您的 CSS 中，您是可能不需要浮动的浮动元素……并且您正在将内联样式与外部 CSS 混合。这不完全是一个问题，但在尝试进行故障排除时可能会让人头疼。

您的.hover事件也会出现一些不稳定的行为，因为在动画序列完成之前事件可能会触发多次。

这是一个工作示例：http: //jsfiddle.net/kbgsP/11/

HTML：

<div class="tile">
    <div class="main">
        <img src="http://placehold.it/509x188" width="509" height="188" alt="roboform">
    </div>
    <div id="boo" class="second">
        <p class="description"> <b>Roboform Bot</b>
            <br>This bot will speed up the addition process of new idetities. All the identities will match to a fake Italian person. If you don't know the usage of Roboform like to know that it's a software that fill registration fields for you. The trial version lasts for one day only. The full version is priced 4&euro;.</p>
        <div class="LinkButton" onclick="location.href='http://www.fillobottosw.altervista.org/apps/roboform/Roboform_Bot.exe';"></div>
    </div>
</div>

<div class="tile">
    <div class="main">
        <img src="http://placehold.it/509x188" width="509" height="188" alt="roboform">
    </div>
    <div id="boo" class="second">
        <p class="description"> <b>Roboform Bot</b>
            <br>This bot will speed up the addition process of new idetities. All the identities will match to a fake Italian person. If you don't know the usage of Roboform like to know that it's a software that fill registration fields for you. The trial version lasts for one day only. The full version is priced 4&euro;.</p>
        <div class="LinkButton" onclick="location.href='http://www.fillobottosw.altervista.org/apps/roboform/Roboform_Bot.exe';"></div>
    </div>
</div>

CSS：

.tile {
    overflow:hidden;
    border:1px solid #999;
    height: 188px;
    width: 509px;
    margin: 4px auto 12px auto;
    cursor: pointer;
}
.main, .second {float:left; width:509px;}
.second {margin-left: 12px;}
.second p {color: #999;}

JS：

// hide your descriptions
$('.description').hide();

// track whether or not the user really wants to see the description
var checkIntent = '';
// how long should the user have to hover before you show them the description (in milliseconds)
var waitTime = 500; 

// bind the hover event to all `.tile` elements.
$('.tile').hover(showDescription, hideDescription);

function showDescription(e){
    // wait X seconds before starting the animation sequence
    checkIntent = setTimeout(function() {
        var tile = $(e.currentTarget);
        var descriptionContainer = tile.find('.description');
        descriptionContainer.data('showing', true);
        tile.animate({width:'1100px'}, 300, function(){
            descriptionContainer.fadeIn(300);
        });
    }, waitTime);
}
function hideDescription(e){
    // if the user's mouse leaves the bound element and the timer has not fired,
    // cancel the animation sequence to show the description
    clearTimeout(checkIntent);
    var tile = $(e.currentTarget);
    var descriptionContainer = tile.find('.description');
    // if the description is showing - hide it
    if(descriptionContainer.data('showing')) {
        descriptionContainer.fadeOut(300, function(){
            tile.animate({width:'509px'}, 300);
        });
        descriptionContainer.data('showing',false);
    }

}
于 2013-06-19T12:30:43.817 回答