小编Wor*_*sor的帖子

位置:绝对和父高?

我有一些容器,他们的孩子只是绝对/相对定位.如何设置容器高度,让他们的孩子在他们里面?

这是代码:

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个方格之间,而不是它们之后.

http://jsfiddle.net/Ht9Qy/

任何简单的修复?

请注意,我不知道这些孩子的身高,我不能设置身高:容器的xxx.

html css height position absolute

86
推荐指数
3
解决办法
21万
查看次数

反应onClick和preventDefault()链接刷新/重定向?

我正在渲染一个带有反应的链接:

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来说,我是新手.

谢谢!

hyperlink coffeescript preventdefault reactjs

66
推荐指数
5
解决办法
9万
查看次数

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处理方式?

reactjs react-router

26
推荐指数
4
解决办法
4万
查看次数

PHP如果速记和回声在一行 - 可能吗?

什么是最好的,首选的写作方式,如速记单线,如:

expression ? $foo : $bar
Run Code Online (Sandbox Code Playgroud)

情节扭曲:我需要echo $fooecho $bar.任何疯狂的伎俩?:)

php if-statement echo shorthand

20
推荐指数
3
解决办法
6万
查看次数

jQuery - 简单的输入验证 - "空"和"非空"

我有一个我要验证的输入:

<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"为空,也无法用"空"消息显示警报.所以,基本上,无论我做什么,只有第一个陈述是真的,第二个陈述是假的,总是如此.

怎么了?

validation ajax jquery

17
推荐指数
2
解决办法
10万
查看次数

jQuery - 根据值的宽度调整表单输入的大小?

是否有可能获得输入的值宽度并动态调整输入大小以使值适合?

这是一个例子:

http://jsfiddle.net/bzBdX/2/

forms jquery resize input

12
推荐指数
3
解决办法
3万
查看次数

谷歌地图 - 将地址转换为纬度和经度 - PHP后端?

是否可以转换(在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&#038;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一段时间了,但我觉得我没经验.

谢谢.

php google-maps geocoding

12
推荐指数
3
解决办法
5万
查看次数

CSS3显示:table-cell&float?

我有一个长div容器设置为display:table和&divs设置为display:table-cell; vertical-align: middle.

我对垂直对齐的结果非常满意,但是:

  • 我不知道这3个div的宽度,
  • 我希望其中一个位于div容器的右侧(当然减去填充),
  • float: right不起作用display: table-cell.

这是一个例子(我想将金色div浮动到右边).我不能用JS.如果IE7不可能,我需要它在IE7 +或IE8 +中工作.任何提示/想法?

http://jsfiddle.net/cZ7Th/2/

vertical-alignment css-float css-tables

11
推荐指数
2
解决办法
3万
查看次数

HTML/PHP - 默认输入值

我有一个post php表单和一组输入:

  1. 你的名字
  2. 你的姓氏
  3. 我的名字

每个输入看起来都一样,只有名称改变:

<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".

php forms input default-value

8
推荐指数
1
解决办法
7万
查看次数

当网站"太短"并且页脚下方有空白时该怎么办?

介绍

我见过很多很多很棒的网站都是由最好的前端开发者制作的,但大多数(如果不是全部)网站都有这个问题.什么是最好的跨浏览器技术,将页脚保持在正确的位置?

酷"标题 - 内容 - 页脚"布局:

布局 - 好的

布局破碎(当网站"太短"时):

布局 - 破碎:(

在较小的屏幕上一切都很好,但这在1680x1050或FullHD分辨率下非常频繁.

部分修复

  • 页脚的绝对定位,但这只会将页脚上方的间隙移动到内容部分,在许多情况下看起来更好,但仍然很糟糕.

  • 创建非常长的页脚​​但我们假设在这种情况下我们希望它只有20像素的高度.

  • 改变body { background:页脚的颜色会使它看起来不那么粗糙,但差距仍然在那里.

  • 可能是一些JavaScript技巧,如获取窗口的高度和改变一些元素的位置/大小,但听起来像一个矫枉过正.

工作修复

看起来仍然是最好的网站足够长,以适应最大的屏幕(嗯,非常明显).


这个问题有什么名字吗?我在SO上找不到任何东西,我相信人们之前都在问这个问题.你有任何想法如何处理这个问题,也许有一些智能修复,我不知道的技巧?

谢谢!

html css layout frontend

7
推荐指数
2
解决办法
5072
查看次数