标签: width

我正试图通过使用标题的自定义字体为我的网站增添趣味.对我来说,最合适的方法是使用PHP和GD.我写了一个小脚本,它将根据$ _GET值输出动态文本,但有时图像太宽,这会移动其他所有内容.

如何根据文本的宽度调整图像的宽度？这是我到目前为止编写的代码:

<?php
// Settings
$sText = $_GET['t']; // Text of heading
$sFont = "font/AvantGarde-Book.ttf"; // Default font for headings
$sMain = $_GET['c'] ? $_GET['c'] : 0xF2AB27; // Get a font or default it

// Create the image
header("content-type: image/png"); // Set the content-type
$hImage = imagecreatetruecolor(200, 24);
ImageFill($hImage, 0, 0, IMG_COLOR_TRANSPARENT);
imagesavealpha($hImage, true);
imagealphablending($hImage, false);
imagettftext($hImage, 20, 0, 0, 24, $sMain, $sFont, $sText); // Draw the text
imagepng($hImage); // Generate the image
imagedestroy($hImage); // Destroy it from the …

在iPad上查看时,我的背景图像并未跨越浏览器的整个宽度.这已经发生了不止一次,所以它一定是我编写CSS的方式.

这是一个页脚的例子,其bg图像在iPad上停止了大约70% - 它有三列浮动.

我把完整的项目放在这里:https: //github.com/christineh/TJ-portfolio

HTML:

<footer>
<div class="footer_invs">
<div class="footer">
<h1></h1>
<p></p>
</div>
<div class="footer">
<h1></h1>
<img src="" width="32" height="32" border="0">
</div>
<div class="footer3">
<h1></h1>
<img src="">
</div>
</div>
</footer>

CSS:

footer {
    background: url(images/footer/background.jpg) repeat-x;
    width: 100%;
    height: 113px;
    margin-top: 250px;
    overflow:hidden; 
    overflow-x:hidden; 
}
.footer_invs {
    background: url(images/footer/corner.png) no-repeat 186px 0px;
    width: 1018px;
    height: 78px;
    padding-left: 200px;
    padding-top: 32px;
}
.footer {
    float: left;
    width: 275px;
}
.footer h1 {
    padding-bottom: 8px;
}
.footer p …

每当我尝试制作宽度为100%的div时,它不会穿过整个页面,它会在两侧留下小的边距(左上角和右上角),我希望div跨越整个页面,例如本页面顶部的标题栏.

$(".mydiv").css('width', $(".image").width());

这段代码工作正常,但我想让这个宽度变得重要,正确的方法是什么？

我试过这个,但它不起作用

$(".mydiv").css('width', $(".image").width()+'!important');

(!重要)

我正在学习CSS,我试图创建一个简单的布局.

我将"标题"设置为宽度为100%,将"左侧"设置为宽度为20%,将"右侧"设置为80%.但是标题的宽度大于左侧和右侧的总宽度.为什么这样以及如何解决？

    div {
        border-radius: 10px;
    }
    
    #header {
        z-index: 1;
        background-color: #80B7ED;
        height: 50px;
    	width: 100%;
        position: fixed;
    }
    
    .left {
        background-color: #5A9DE0;
        height: 400px;
        width: 20%;
        float: left;
        position: relative;
    }
    
    .right {
        background-color: #BFD9F2;
        height: 400px;
        width: 80%;
        float: right;
        position: relative;
    }
    
    #footer {
        background-color: #80B7ED;
        clear: both;
        height:70px;
    }

    <!DOCTYPE html>
    <html>
    	<head>
    		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    		<title></title>
    	</head>
    	<body>
    	    <div id="header">
    	    </div>
    	    <div class="left">
    	    </div>
    	    <div class="right">
    	    </div>
    	    <div id="footer">
    	    </div>
        </body>
    </html>

编辑 …

我有一个heading包含动态生成的文本的div类,我想用a来强调它border-bottom.但是,如果我设置.heading {width:auto}然后div水平填充其容器,并且下划线太长.

我怎样才能使div只与包含文本一样长？

http://jsfiddle.net/roLxsw3v/

每当我以百分比设置ZingChart的高度和宽度,以便它与所有屏幕尺寸兼容时,它都没有效果.示例:如果我设置1%高度和1%宽度,则不会发生任何情况.我正在改变高度和宽度:

zingchart.render({ 
id : 'myChart', 
data : myConfig, 
height: '1%', 
width: '1%' 
 });

您可以在此处查看完整代码:http: //jsfiddle.net/xbh2ap18/

我有以下HTML:

<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" href="STYLE.css">
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>

<body>
    <header class="row"></header>

    <section class="row section1"></section>
    <section class="row section2"></section>
    <section class="row section1"></section>
    <section class="row section2"></section>
    <section class="row section1"></section>

    <footer class="row"></footer>
</body>

</html>

由于某种原因,整个网页比浏览器窗口更宽.当我删除row课程时,一切都恢复正常.本地CSS文件与此问题无关.我的猜测是,bootstrap CSS会以某种方式修改行,使其更宽.所以我想问一下是否有人有任何想法可以解决这个问题.

删除引导程序后，我遇到了这个问题，页面的宽度大于屏幕的宽度，结果出现了水平滚动条。我认为将body，html设置为0填充和边距以及100％宽度都可以，但是问题仍然存在。

解决方案：我的图像比视图宽，因此我需要设置box-sizing: border-box为将图像包含在父级中。然后，我继承了所有元素。所以现在我的CSS的顶部是：

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
}

的HTML：

@{
    ViewBag.Title = "Home Page";
}
<div class="main">
    <div class="content">
        <div id="welcome" class="page">
            <h1>asasd</h1>
            <p>
                test3
            </p>
        </div>
        <div id="asdasd" class="page" data-original="/Images/asdh.jpg">
            <h1>asdasd</h1>
            <p>
                test2
            </p>
            <div class="vfd"></div>
            <div class="measurment"></div>
        </div>
        <div id="test2" class="page" data-original="/Images/test.jpg">
            <h1></h1>
            <p>test
            </p>
        </div>
    </div>
</div>

CSS：

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.main …

是否有一个反应式窗口宽度，其中变量或数据属性跟踪窗口调整大小

例如

computed:{
    smallScreen(){
        if(window.innerWidth < 720){
            this.$set(this.screen_size, "width", window.innerWidth)
            return true
        }
    return false
}