html - 水平对齐两个元素

  显示原文与译文双语对照的内容
0 0

将两个元素放在同一行 inside 上时出现问题。 我想我最好向你展示我的意思: http://fillobottosw.altervista.org/

展开完成后,在右侧显示一种描述,但不显示该框,而不是显示 inside的灰色边框。 这是我目前写下来的:

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

 }
);

你能告诉我我一直在做的错误? 先谢谢了

时间: 原作者:

0 0

你的HTML和CSS有一些问题。 例如有一个上的元素具有相同的id 值。 你可能应该将这些 switch 添加到类中,或者为每个元素创建一个惟一的id 值。 在你的CSS中,你是浮动元素,可能不需要被浮动。并且你将 inline 样式与外部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;}

磅:


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

}

原作者:
0 0

因此,快速查看一下,看起来应该添加/删除以下内容


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

然后移除

 
margin-left: 520px

 

来自 p.description 所以 p.description 应该读取


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

然后添加一些 padding 或者一些描述来使它更好地工作,

希望这有助于某些内容:)

P.S

主div应该是浮动的,第二个应该是浮动的,不需要 display: 内联块

0 0

我无法修复你的代码,因此定位到 relative 描述为. tile,它工作。
而且我观察到,如果。描述的内容只是一个词,那么你的代码就会工作。 不知道为什么,这里的是编辑代码的codepen页面。

原作者:
...