小编Nrc*_*Nrc的帖子

有没有办法垂直和水平地居中DIV,但重要的是,当窗口小于内容时,内容不会被切割 .div必须具有背景颜色和宽度和高度.

我总是将div与绝对定位和负边距居中,就像在提供的示例中一样.但它存在的问题是它会削减内容.有没有一种方法可以在没有这个问题的情况下使div .content居中？

我在这里有一个例子:http://jsbin.com/iquviq/1/edit

CSS:

body { margin: 0px; }

.background {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: yellow;
}

/* 
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?: 
*/ 


.content {
    width: 200px;
    height: 600px;
    background-color: blue;

    position:absolute;
    top:50%;
    left:50%;
    margin-left:-100px;/* half width*/
    margin-top:-300px;/* half height*/
}

HTML:

<div class="background">
    <div …

我在一个页面上有一个表单,提交到另一个页面.在那里,它检查输入邮件是否已填满.如果是,那么做一些事情,如果没有填补,做其他事情.我不明白为什么它总是说它被设置,即使我发送一个空表格.缺少什么或错了什么？

step2.php:

<form name="new user" method="post" action="step2_check.php"> 
    <input type="text" name="mail"/> <br />
    <input type="password" name="password"/><br />
    <input type="submit"  value="continue"/>
</form>

step2_check:

if (isset($_POST["mail"])) {
    echo "Yes, mail is set";    
} else {    
    echo "N0, mail is not set";
}

我感到困惑line-height的inline元素.我一直在寻找:

• http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced
• http://www.w3.org/wiki/CSS/Properties/line-height
• https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

但我不确定我是否理解.我知道如果我使用display:inline-block转换为块,我可以使高度准确.但我试图理解的是行高内联元素的工作原理.以下是问题:

• 我有一个文本,font-size: 15px但如果我看到浏览器的开发人员工具,它会18px.为什么？在font-size刚刚aproximate？或者它不衡量跌宕起伏？

• 为什么背景色inline元素不具有相同的height比line-height？的line-height在inline元件测量线箱的空间,即空间的上方和下方的线,而不是inline元素本身.这是解释吗？

这是一个可以玩的例子.

CSS:

#block-element {
  font-family: 'verdana', sans-serif;
  font-size: 15px;
  line-height: 15px;
  text-decoration: none;
  color: black;
  margin: 0;
  background-color: grey;
}
#inline-element {
  -webkit-box-sizing: border-box;
  font-family: 'verdana', sans-serif;
  font-size: 15px;
  line-height: 15px;
  text-decoration: none;
  color: black;
  margin: 0;
  background-color: green;
}

<div id="block-element">
  <a id="inline-element" href="#">
    inline element font-size:15px but height:18px …

我找到了一个有趣的资源:Hammer.js.我试着用Hammer和jQuery刷卡.

1)我在这里下载了代码
2)我已将该代码放在文档中.我在文档的头部放了一个链接到我要用的软键:<script src="hammer.js"></script>
3)我不知道如何使用它.我尝试在jQuery中做类似的事情.我的意思是我想滑动而不是点击:

$(function(){
    $(".blue").click(function() {
        $(".blue").animate({left: "0"}, 500)    
    });
}) 

http://jsfiddle.net/Narcis/rmtXC/

我有办法获取表的列的名称.它工作正常,但现在我想更新到新的mysqli？(我尝试了mysqli_fetch_field,但我不知道如何应用于这种情况,我不确定它是否是wright选项)

如何用mysqli做同样的事情？:

$sql = "SELECT * from myTable";
$result = mysql_query($sql,$con);
$id = mysql_field_name($result, 0);
$a = mysql_field_name($result, 1);

echo $id;
echo $a;

每次我点击div"蓝色"它移动100px.它工作得很好,有一天我意识到它停止了工作.在尝试了很多东西之后,我发现问题出在最新版本的jQuery 1.10现在它只移动100px一次.这是因为它忽略了+ =.我找不到它是否被弃用？如果是这样,现在正是这样做的正确方法是什么？

你可以看到它在这里工作:http://jsfiddle.net/RB4eJ/1/
(这是在jQuery 1.9.1中工作.但它不在1.10)

$(function(){
    $(".blue").click(function() {
        $(".blue").animate({left: "+=100"}, 500)    
    });
})

是否有可能<div>适应其背景图像？我的意思是保持宽度和高度的比例.

澄清:

• 的div变化宽度.(这是一个响应式设计)

• 我并不是要让背景适应div.这是可能的background-size.但我要问的是循环方式:在背景中拥有一个图像,并让div父级适应该图像,无论其大小如何.

• 我知道如果我将图像放在html中而不是在后台,我可以做类似的事情.但在这种情况下,我无法更改不同设备大小的图像.所以我要求将图像放在后台,以便能够使用CSS更改它.

在我给出的例子中,我可以使图像适应宽度,但我得到了与高度的差距.我可以使div适应图像的高度,因为图像会改变它的大小吗？以另一种方式问:在响应环境中,可以使用图像背景的div,在不留空的情况下改变大小吗？

这是一个可以玩的例子.

CSS:

#image {
    margin:0px auto; 
    width:90%;
    max-width:512px;
    height:512px; /* I need to give heigt to make it visible? */

    background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png');
    background-repeat:no-repeat;
    background-size:100%;
    background-color:yellow;/*just to make visible the gap in the height*/
}

HTML:

<div id="image"></div>

我知道如何对平板电脑肖像进行媒体查询,为手机查看另一个媒体查询.但是,是否有可能只为所有人提供一个媒体查询:平板电脑肖像和手机？

/* tablets portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (orientation : portrait) { 

}

/* phones */
@media screen and (max-device-width: 640px) { 

}

/* tablets portrait and phones 
Is it possible to have only one media query for this that do the same than the other media queries together?
*/

我尝试应用新的html5元素.如果页面非常简单,带有h1和文本,我不确定从语义的角度来看,最好的方法是什么,如何正确反映页面的结构.

1. 如果文本是例如公司的哲学(或关于页面或团队......)我认为使用文章是不正确的,那可以吗？(因为这不是可以独立分发或可重复使用的,例如联合)在这种情况下,它应该只是一个div吗？

2. 用一个部分包装h1和div有什么意义吗？如果页面中只有一个部分,它似乎没有用.

那么,用标题和文本勾勒出一个页面最正确的方法是什么？

<h1> Title </h1>

<div id="content">
    <p> text, text, text... </p>
</div>

我有一些没有标签的文字.我试着找到它.用jQuery

(这是dinamic文本,所以我不知道我有多少文本的和平或它们在哪里.我只知道它们在div中.这与其他问题不同)

我可以找到一个解决方案,找到没有标签的文本,将其包装<p>但是这也会生成一些空的p标签.所以问题是:
- This.nodeType === 3似乎找到了文本和空格.谁能解释一下？
- 有人可以解决此问题或显示另一种方法来只查找没有标签的文本吗？

(我可以找到nodeType === 3"表示元素或属性中的文本内容")

如果你喜欢在那里玩,请小提琴:http://jsfiddle.net/bhpaf8hu/

$("#tot").click(function() {
				
	$("div").contents().filter(function() {
		return this.nodeType === 3;
	}).wrap("<p>");
	
});

p { background:green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="tot"> 
    <h1> This is a h1</h1>
    Text without p
    <br>
    Another text without p
    <br>
    <p>This text has p</p>
</div>

解决方案预期:所以我想找到没有标签的文本并将其包装在ap标签中.在这个例子中,这就是我要寻找的:

<div id="tot"> 
    <h1> This is a h1</h1>
    <p>Text without p</p>
    <br>
    <p>Another text without p</p>
    <br>
    <p>This text has p</p>
</div>