小编Joh*_*nes的帖子

我有一个父div必须在它的边缘有一个蓝色背景.我决定使用:在psedoeelement之前做到这一点.我将位置设置为绝对值,高度设置为100%.现在,当我将此高度设置为100%时,我相信之前的页面高度而不是它的div加上它几乎就好像这个psedoelement:之前是一个具有固定位置的div.这是一些代码

<div contenteditable="true" class="editableDiv" style="heigth: 100px;">
<p><b>test </b><p>

  </p>
</div>

CSS

.editableDiv{
  background-color: #DEDEDE;

  min-height: 100px;
  max-height: 400px;
  overflow:scroll;
}
.editableDiv p{
    padding: 0px 0px 0px 43px;
}

.editableDiv:before{
 background-color:blue; 
 content: " ";
 position:absolute; 
 float:left;
 height: 100%;
 width: 40px;
 display:block;
}

我怎样才能使蓝色边缘滚动,div会根据高度自动调整高度？下面这个是对的jsfiddle问题

编辑1

添加一个位置的问题:相对于editabeDiv,只要
不进行div滚动就可以工作,但只要有滚动,就不再有从该点开始的边距.您可以尝试在jsfiddle上输入一段时间来重新调整此操作.

我正在尝试使用<area>和<map>标记使图像的一部分成为链接。但是我不知道如何使映射区域可见以控制它的确切位置（除了观察光标成为指针的位置，但这太繁琐了……）

因此，如果使用以下示例代码，如何使多边形在图像顶部可见，以便更有效地对其进行编辑？

我尝试向class地图和具有CSS中定义的边框的区域添加属性，但这没有用：如果将其添加到<map>标记中，则该属性会显示在图像的外部（在右下角附近），如果我将其添加到<area>，则什么都不会显示。

<img src="mypicture.gif" width="300" height="200" usemap="#mymap1">
<map name="mymap1">
  <area shape="poly" coords="120,80,130,70,50,90,120,180,50" href="mylink.html" class="x">
</map> 

CSS：

.x {
  border: 1px solid red;
  }

得到答案后的补充说明：我需要它来编辑链接区域，这些区域不应该一直可见，而且不仅仅在悬停时可见。接受的答案中提到的F​​irefox插件是完美的-它始终显示区域，甚至允许编辑，添加其他多边形节点等。

我有一个网站，首页标题下方播放视频，该视频非常大，我正在使用媒体查询将其从移动浏览器等中删除。

它显示得很好，正如我想要的那样。

但我想知道，如果我简单地将其设置为display:none，它还会在后台缓冲吗？那么手机用户的加载时间会无缘无故变慢吗？如果是这样的话我该怎么办？

我搜索了这个问题，只找到了一个远程相关的问题。但问题是代码是否会被加载。我可以忍受加载额外的 HTML 行。所以这不是问题。

我在div中有一个图像和标题标记,如何将它们与心爱的图像对齐.

<div class="clearfix">
    <img src="http://localhost/chifley-acf/wp-content/uploads/2017/03/icon-01.png" alt="Icon" class="pull-left">
    <h4>Refinancing</h4>
</div>

像这样的电流输出

但我想要这样

我在一个页面中使用两个webfonts,我使用dompdf转换为PDF.我在标题中有这个:

<link href='http://fonts.googleapis.com/css?family=Signika:600|Roboto+Condensed' rel='stylesheet' type='text/css'>

然后我在CSS规则中使用它们

body {
  font-family: "Roboto Condensed", sans-serif;
  [ ... ]
}
h1 {
  font-family:'Signika', Arial, Helvetica, sans-serif;
  [ ... ]
}

现在,当我生成PDF时,h1显示为"Signika"字体,但"Roboto Condensed"被Helvetica或其他一些标准的sans-serif字体替换.

如果我打开"预览"文件(即我在PDF生成脚本中包含的php页面),"Roboto Condensed"会按预期显示,但它不会进入PDF.但正如我写的那样,"Signika"就在PDF中,这对我来说有点奇怪.顺便说一句,我也试过直接包括字体-face规则为CSS规则p,div,li等但不会改变任何事情.

有什么建议我可以解决这个问题吗？

编辑/添加:

考虑到这一点,两种字体之间的区别在于Roboto Condensed在其名称中有一个空格.我想知道这是否会导致问题(即dompdf无法处理这样的字体名称)？但只要我从Google服务器获取字体,我就无法改变它.

我这里有一个容器，它有三个子 div，它们是inline-block. 现在，当我在子级中添加一个像 div 或段落这样的子级时，父级 div 会向下推。我已经知道解决方案了。如果我使用属性 vertical-align top 问题就解决了。但我只是想知道是什么原因？ jsfiddle在这里

body{ 
  margin:0
}
#navbar {
  width:100%;
  background-color:black;
  height:50px;
  padding: 0 150px 0 150px;
  position:relitive;
}
#logo {
  height:60px;
  width:90px;
}
#container {
  background-color:#E6E6E6;
  width:78%;
  margin: auto;
  height:1000px;
  text-align:center;
}
#navTable { 
  color:white;
  position:absolute;
  top:10px;
  left:300px;  
  font-size:1.5em;
}
#navTable td {
  padding:0 10px 0 10px;
  border-right:1px solid white;
}
#container>div {
  width:32%;
  height:100%;
  border:1px solid black;
  display:inline-block;

}

.content { 
  background-color:yellow;
  height:300px;
}	

<div id='navbar'>
  <img id='logo' src="http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png"/> …

使用 column-count: 2 时，如果有溢出，我希望出现垂直滚动条，但会出现水平滚动条。如果没有列数，垂直滚动条就会出现，正如预期的那样。如何使用 column-count: 2 并显示垂直滚动条？

.searchCriteriaPanel {
    border-radius: 0 0 5px 5px;
    width: 300px;
    height: 200px;
    background-color: lightgrey;
    padding: 10px;
    overflow-y: auto;
    column-count: 2;
}

<div id="MarketContent" class="searchCriteriaPanel">
    <label><input type="checkbox">one</label><br />
    <label><input type="checkbox">two</label><br />
    <label><input type="checkbox">three</label><br />
    <label><input type="checkbox">four</label><br />
    <label><input type="checkbox">five</label><br />
    <label><input type="checkbox">six</label><br />
    <label><input type="checkbox">seven</label><br />
    <label><input type="checkbox">eight</label><br />
    <label><input type="checkbox">nine</label><br />
    <label><input type="checkbox">ten</label><br />
    <label><input type="checkbox">eleven</label><br />
    <label><input type="checkbox">twelve</label><br />
    <label><input type="checkbox">thirteen</label><br />
    <label><input type="checkbox">fourteen</label><br />
    <label><input type="checkbox">fifteen</label><br />
    <label><input type="checkbox">sixteen</label><br />
    <label><input type="checkbox">seventeen</label><br …

https://jsfiddle.net/vaf6nv36/1/

气球图像可以在苹果图像上缓慢过渡吗？

我认为我需要更多的过渡参数，还是应该使用不透明度？

有人可以帮忙吗？

html

 <div class="img1">

     </div>
 <div class="img2">

 </div>

的CSS

.img1, .img2{
   border: 1px solid black;
   transition: 1s;
   position: absolute;
}

.img1{
    left: 25%;
    height: 500px;
    width: 500px;
    z-index: 1;
    background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg);
   }

.img2{
  right: 25%;
  width: 500px;
  height: 500px;
  bottom: 0;
  z-index: 2;
  background-image:  url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg);
}

.img1:hover{
       z-index: 999;
}

我正在创建一个网页,当我将鼠标悬停在该.Soccer部分上时,它将下拉并显示Link1,Link2,Link3.

没有position: fixed;,代码工作得很好.正如我想要在网页顶部的标题,我把position: fixed;

但是一旦我把它打开,"足球"的下拉按钮就不起作用了.

html {
  background-image: url("Images/BackgroundImageI.jpg");
  background-repeat: no-repeat;
}

body {
  background-color: White;
  color: Black;
  margin-left: 0%;
  margin-right: 0%;
  margin-top: 40%;
  margin-bottom: 0%;
  border: 10px outset Gray;
}

h1 {
  font-family: Arial, Verdana, Geneva, sans-serrif;
  color: teal;
  text-align: center;
}

p {
  font-family: Arial, Verdana, Geneva, sans-serrif, serrif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 24px;
}

ul {
  margin-left: 0%;
  margin-right: 0%;
  margin-top: 0%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: …

主语

我有两个 div（左和右）。我想让左边的 div 像主要的一样，并强制右边的 div 与左边的高度相同，即使它会有更多的内容（并且这样做overflow: hidden）。如果有一种方法可以使用css和html不使用它，我将不胜感激js。

这是一个小片段，我的标记看起来如何：

.parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.children-1 {
  width: 66.6%;
  background: green;
}

.children-2 {
  width: 33.4%;
  background: yellow;
}

<div class="parent">
  <div class="children-1">
    <p>My content</p>
  </div>
  
  <div class="children-2">
    <p>a lot of content<p>
    <p>a lot of content</p>
  </div>
</div>