水平对齐两个元素

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

执行扩展后，右侧会显示一种说明，但不是显示在灰色边框内。这是我写下来至今：

HTML代码

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

    } 
);

你能告诉我我一直在做的错误吗？在此先感谢

来源

2013-06-19 fillobotto

您的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-19 12:30:43 fletch

这个。不知道这个，你的建议对我来说非常有用。无论如何，现在瓷砖下面的所有元素都消失了。 – fillobotto

我会处理它，然后我会在这里发帖，如果我不断收到此问题。谢谢 – fillobotto

“当你浮动元素时，它会将它们从常规的DOM流中提取出来，所以它们并不像你想象的那样被包含在内。”也许这就是为什么我得到这个：http://imgur.com/bmQhHwg。要模拟它，请在我的网站上，将鼠标放在一块瓷砖上，然后非常快地放在第二块瓷砖上，然后再放在第一块瓷砖上，最后将鼠标放在瓷砖外面。你必须非常快。我想现在的问题是jQuery，它太慢了...... – fillobotto

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

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

然后从p.description删除

margin-left: 520px

所以p.description应阅读

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

然后添加一些填充或其他描述t Ø让它坐好，

希望这有助于一些什么:)

主要DIV应左浮动，第二个应该浮动的权利，没有必要显示：inline-block的

来源

2013-06-19 12:21:27 ottis

你的建议是诀窍，但现在出现了另一个问题。当瓦片被折叠时，它下面的空白区域更厚，因为“秒”div在“main”div下。 – fillobotto

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

来源

2013-06-19 12:25:57 svineet

水平对齐两个元素

回答

相关问题