我有一些容器,他们的孩子只是绝对/相对定位.如何设置容器高度,让他们的孩子在他们里面?
这是代码:
HTML
<section id="foo">
<header>Foo</header>
<article>
<div class="one"></div>
<div class="two"></div>
</article>
</section>
<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->
<section id="bar">
<header>bar</header>
<article>
<div class="one"></div><div></div>
<div class="two"></div>
</article>
</section>
Run Code Online (Sandbox Code Playgroud)
CSS
article {
position: relative;
}
.one {
position: absolute;
top: 10px;
left: 10px;
background: red;
width: 30px;
height: 30px;
}
.two {
position: absolute;
top: 10px;
right: 10px;
background: blue;
width: 30px;
height: 30px;
}
Run Code Online (Sandbox Code Playgroud)
这是一个jsfiddle.我希望"条形"文本出现在4个方格之间,而不是它们之后.
任何简单的修复?
请注意,我不知道这些孩子的身高,我不能设置身高:容器的xxx.
我正在渲染一个带有反应的链接:
render: ->
`<a className="upvotes" onClick={this.upvote}>upvote</a>`
Run Code Online (Sandbox Code Playgroud)
然后,上面我有upvote函数:
upvote: ->
// do stuff (ajax)
Run Code Online (Sandbox Code Playgroud)
在链接之前我已经跨越那个地方,但我需要切换到链接,这就是麻烦 - 每次点击.upvotes页面都会刷新,到目前为止我尝试过:
event.preventDefault() - 无法正常工作.
upvote: (e) ->
e.preventDefault()
// do stuff (ajax)
Run Code Online (Sandbox Code Playgroud)
event.stopPropagation() - 不工作.
upvote: (e) ->
e.stopPropagation()
// do stuff (ajax)
Run Code Online (Sandbox Code Playgroud)
返回false - 不工作.
upvote: (e) ->
// do stuff (ajax)
return false
Run Code Online (Sandbox Code Playgroud)
我也在我的index.html中使用jQuery尝试了以上所有内容,但似乎没有任何效果.我该怎么做,我做错了什么?我已经检查了event.type,click所以我想我应该能够以某种方式避免重定向?
对不起,对于React来说,我是新手.
谢谢!
我对React比较陌生,我想知道这里的标准是什么.
想象一下,我有一个像这样的反应路由器:
<Router history={history}>
<Route path="/" component={App}>
<Route path="home component={Home} />
<Route path="about" component={About} />
<Route path="inbox" component={Inbox} />
<Route path="contacts" component={Contacts} />
</Route>
</Router>
Run Code Online (Sandbox Code Playgroud)
现在我想删除两个路由,如果prop.mail设置为false,所以一个明智的方式,如下所示:
<Router history={history}>
<Route path="/" component={App}>
<Route path="home component={Home} />
<Route path="about" component={About} />
{ if.this.props.mail ?
<Route path="inbox" component={Inbox} />
<Route path="contacts" component={Contacts} />
: null }
</Route>
</Router>
Run Code Online (Sandbox Code Playgroud)
但是有2条路线和React返回错误:
表达式必须有一个父元素.
我不想在这里使用多个ifs.什么是首选的React处理方式?
什么是最好的,首选的写作方式,如速记单线,如:
expression ? $foo : $bar
Run Code Online (Sandbox Code Playgroud)
情节扭曲:我需要echo $foo或echo $bar.任何疯狂的伎俩?:)
我有一个我要验证的输入:
<input type="text" id="input" />
Run Code Online (Sandbox Code Playgroud)
这是JS:
jQuery("#input").live('change', function() {
if("#input:not(:empty)") {
alert('not empty');
}
else if("#input:empty") {
alert('empty');
}
});
Run Code Online (Sandbox Code Playgroud)
即使"#input"为空,也无法用"空"消息显示警报.所以,基本上,无论我做什么,只有第一个陈述是真的,第二个陈述是假的,总是如此.
怎么了?
是否可以转换(在PHP后端):
<?php
$Address = "Street 1, City, Country"; // just normal address
?>
Run Code Online (Sandbox Code Playgroud)
至
<?php
$LatLng = "10.0,20.0"; // latitude & lonitude
?>
Run Code Online (Sandbox Code Playgroud)
我目前使用的代码是默认代码:
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(10.0,20.0);
var mapOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'This is a caption'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map"></div>
Run Code Online (Sandbox Code Playgroud)
我已经阅读了https://developers.google.com/maps/documentation/geocoding一段时间了,但我觉得我没经验.
谢谢.
我有一个长div容器设置为display:table和&divs设置为display:table-cell; vertical-align: middle.
我对垂直对齐的结果非常满意,但是:
float: right不起作用display: table-cell.这是一个例子(我想将金色div浮动到右边).我不能用JS.如果IE7不可能,我需要它在IE7 +或IE8 +中工作.任何提示/想法?
我有一个post php表单和一组输入:
每个输入看起来都一样,只有名称改变:
<input type="text" name="your_name" value="<?php echo get_option('your_name'); ?>" />
Run Code Online (Sandbox Code Playgroud)
当value =不可用时如何设置默认值?
[编辑]
好吧,通常我会做以下事情:
<input type="text" name="your_name" value="Mike" />
Run Code Online (Sandbox Code Playgroud)
但在这种情况下,我有一个PHP脚本,可以抓取输入数据并使用它来显示它value="<?php echo get_option('your_name'); ?>".所以我不知道如何强制我的表单在我的输入中显示"Mike".
我见过很多很多很棒的网站都是由最好的前端开发者制作的,但大多数(如果不是全部)网站都有这个问题.什么是最好的跨浏览器技术,将页脚保持在正确的位置?


在较小的屏幕上一切都很好,但这在1680x1050或FullHD分辨率下非常频繁.
页脚的绝对定位,但这只会将页脚上方的间隙移动到内容部分,在许多情况下看起来更好,但仍然很糟糕.
创建非常长的页脚但我们假设在这种情况下我们希望它只有20像素的高度.
改变body { background:页脚的颜色会使它看起来不那么粗糙,但差距仍然在那里.
可能是一些JavaScript技巧,如获取窗口的高度和改变一些元素的位置/大小,但听起来像一个矫枉过正.
看起来仍然是最好的网站足够长,以适应最大的屏幕(嗯,非常明显).
这个问题有什么名字吗?我在SO上找不到任何东西,我相信人们之前都在问这个问题.你有任何想法如何处理这个问题,也许有一些智能修复,我不知道的技巧?
谢谢!
php ×3
css ×2
forms ×2
html ×2
input ×2
jquery ×2
reactjs ×2
absolute ×1
ajax ×1
coffeescript ×1
css-float ×1
css-tables ×1
echo ×1
frontend ×1
geocoding ×1
google-maps ×1
height ×1
hyperlink ×1
if-statement ×1
layout ×1
position ×1
react-router ×1
resize ×1
shorthand ×1
validation ×1