Question

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

执行扩展后，右侧会显示一种描述，但不会显示在灰色边框内。这是我到目前为止写下的内容：

HTML CODE

<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);  

  }
);

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

Answer 1

所以只需快速查看，看起来应该添加/删除以下内容

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

然后删除

margin-left: 520px

来自p.description的

所以p.description应该是

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

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

希望这有助于一些：）

P.S

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

Answer 2

我无法修复你的代码，因此我将.description定位为相对于.tile而且它有效。
而且我观察到如果.description的内容只是一个单词，那么你的代码似乎有效。不知道为什么。无论如何，here's the codepen page for edited code.

Answer 3

您的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);
    }

}

水平对齐两个元素

3 个答案: