水平對齊兩個元素

Question

我在將兩個元素放在容器內的同一行上時遇到問題。 我認為最好向您展示我的意思： 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);  

  }
);

您能告訴我我一直在做的錯誤嗎？ 提前致謝

Answer 1

因此，快速瀏覽一下，看起來您應該添加/刪除以下內容

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

然后移除

margin-left: 520px

從p.description開始，因此p.description應該閱讀

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

然后在說明中添加一些填充或其他內容，以使其看起來更好，

希望這會有所幫助:)

PS

主div應該向左浮動，第二個應該向右浮動，不需要顯示：inline-block

Answer 2

我無法修復您的代碼，因此我將.description定位為相對於.tile，並且它可以工作。
我還觀察到，如果.description的內容只是一個字，那么您的代碼似乎可以正常工作。 鄧諾為什么。 無論如何， 這是已編輯代碼的代碼筆頁面。

Answer 3

您的HTML和CSS有一些問題。 例如，您有多個具有相同id值的元素。 您可能應該將它們切換為類，或為每個元素創建唯一的id值。 在CSS中，您是浮動元素，可能不需要浮動...並且您將內聯樣式與外部CSS混合在一起。 這不完全是問題，但是在嘗試進行故障排除時可能會引起頭痛。

您還會在.hover事件上遇到一些.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);
    }

}