主页 / user-185637

kizoso's questions

Martin Hope
kizoso
Asked: 2020-07-29 02:03:02 +0000 UTC
  • 2

如何在离开滚动条的同时禁用页面滚动？一个modal打开，同时为了避免滚动到所有比浏览器窗口高几倍的html，加了overflow:hidden，但是由于滚动条导致水平跳转的效果出现和消失。如何防止模态背景滚动而不添加溢出：隐藏，即留下滚动条？

html{
	position:relative;
	margin:0 auto;
	/*overflow:hidden; - не нужно использовать*/
	height:100vh;
	width:100%;
}
html body:after{
	content:'';
	background-color:rgba(0, 0, 0, 0.5);
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:9;
}
modal {
    position: fixed;
    overflow-y: auto;
    z-index: 25;
    top: 0;
    bottom: 0;
    width: 18.75rem;
    right: 0;
    padding: 4.125rem 1rem 1rem;
    background-color: #fff;
}
<modal>modal</modal>
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3
<br>1
<br>2
<br>3

UPD：modal里面应该有滚动功能。并且在打开模态框时不能在主要内容中丢失位置，因此 position:fixed 是不合适的。

javascript
Martin Hope
kizoso
Asked: 2020-07-11 23:34:39 +0000 UTC
  • 0

除 gmail 外，所有电子邮件客户端的一切都很好。该客户端强制调整整个布局的字母宽度。是的，您可以按菜单中的按钮-“显示原件”，但这不起作用，您需要立即显示正常布局。我固定每一层的宽度，在body之后添加一个magic spacer：

<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>

唉，它没有帮助。这是我的信的包装：

<table bgcolor="#F3F3F3"
       style="Margin:0;margin:0;padding: 0;font-family:'Arial',sans-serif;max-width:100%;padding:0;width:100%;background:#F3F3F3;">
  <style>
    a{
      text-decoration: none;
      color: inherit;
      color: inherit !important;
    }
    @media print{
      body, html{
        -webkit-print-color-adjust: exact;
      }
    }
  </style>
  <tbody>
  <tr>
    <td>
      <center>
        <table width="600" bgcolor="#6999CC"
               style="Margin:0 auto;margin:0 auto;max-width:100%;width:600px;background:#6999cc;">
          <tbody bgcolor="#6999CC" style="background: #6999CC">
          <tr bgcolor="#6999CC" style="background: #6999CC">
            <td bgcolor="#6999CC" style="background: #6999CC">
              <center bgcolor="#6999CC" style="background: #6999CC">
                <table>
                  <tbody>
                  <tr>
                    <td height="4" style="height: 4px;line-height: 4px;">&nbsp;</td>
                  </tr>
                  </tbody>
                </table>
                <!--spacer-->

                <table cellpadding="0" cellspacing="0" border="0" width="570" ...

当有几个字母并且它们聚集在对话中时，它们的内容就变成了引号。什么变成了引用，即使之前正常显示，现在显示不是编造的。由于 gmail 使用这个强大的功能删除了一些样式。

вёрстка
Martin Hope
kizoso
Asked: 2020-06-03 23:09:11 +0000 UTC
  • 2

如果 div 的宽度有限，并且可以在内部滚动，那么默认情况下它将使范围位于内容的左侧。就像在此样品中。如何在右侧制作范围？这样同时滚动仍然存在，如果可能的话，不使用 js。

div{
  height:200px;
  width:200px;
  position:relative;
  overflow:auto;
  border:2px solid black;
}
img{
  height:170px;
}
<div>
  <img src="https://arte1.ru/images/detailed/4/2219.jpg"/>
</div>

html
Martin Hope
kizoso
Asked: 2020-05-07 17:31:10 +0000 UTC
  • 0

我有触发事件的代码on('change keyup'。您需要模拟此事件才能运行此代码。我尝试了一个触发器，我知道它应该与 一起工作bind，但是通过它的调用看不到事件。而且我根本不想更改 EventListener。是否可以模拟按键事件？

$('#foo').on('change keyup', function(){
  alert('Произошло событие change keyup')
});

window.onload = function(e){     
  function writeText(){
    $('#foo').trigger('change keyup');
  }
  setTimeout(writeText, 500);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="foo" value="123">

javascript
Martin Hope
kizoso
Asked: 2020-04-03 16:25:45 +0000 UTC
  • 5

如何以最简单正确的方式将多个 svg 合并为一个 svg？
例如，我有这个 svg 集：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" height="20" width="20">
  <path fill="#efce4a"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" height="20" width="20">
  <path fill="#efce4a"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" height="20" width="20">
  <path fill="#efce4a"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" height="20" width="20">
  <path fill="#efce4a"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" height="20" width="20">
  <path fill="#efce4a"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
</svg>

<br>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.867 55.867" height="20" width="20">
  <path
      fill="#efce4a"
      d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.867 55.867" height="20" width="20">
  <path
      fill="#efce4a"
      d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.867 55.867" height="20" width="20">
  <path
      fill="#efce4a"
      d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.867 55.867" height="20" width="20">
  <path
      fill="#efce4a"
      d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.867 55.867" height="20" width="20">
  <path
      fill="#efce4a"
      d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
</svg>

但我需要一个完整的 svg 而不是十个 svg。像这样的东西：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" height="50" width="150">

  <g height="20" width="20" x="0" y="0">
  <path fill="#efce4a"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
  </g>
  <g height="20" width="20" h="0" y="30">
    <path fill="#efce4a"
          d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
  </g>
  <g height="20" width="20" x="0" y="60">
    <path fill="#efce4a"
          d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
  </g>
  <g height="20" width="20" x="0" y="90">
    <path fill="#efce4a"
          d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
  </g>
  <g height="20" width="20" x="0" y="120">
    <path fill="#efce4a"
          d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
  </g>

  <br>

  <g height="20" width="20" x="30" y="0">
    <path
        fill="#efce4a"
        d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
  </g>
  <g height="20" width="20" x="30" y="30">
    <path
        fill="#efce4a"
        d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
  </g>
  <g height="20" width="20" x="30" y="60">
    <path
        fill="#efce4a"
        d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
  </g>
  <g height="20" width="20" x="30" y="90">
    <path
        fill="#efce4a"
        d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
  </g>
  <g height="20" width="20" x="30" y="120">
    <path
        fill="#efce4a"
        d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
  </g>
</svg>

svg
Martin Hope
kizoso
Asked: 2020-06-26 17:41:01 +0000 UTC
  • 1

是否可以在 scss(sass) 中为单个选择器创建嵌套规则。在 scss 中，可以使用 parent 前缀为子项和名称编写样式&，但我需要在附件中添加一个外部选择器。例如代码：

.one{
  .two,
  &_1,
  &_other{
    color: red;
  }
}

将编译为：

.one .two,
.one_1,
.one_other{
    color: red;
}

是否可以在.one{}内部放置某种外部选择器以使结果没有父级？例如，我想写一些类似的东西：

.one{
  .two,
  &_1,
  &_other,
  '/какой-то префикс, поднимающий на уровень вверх/'.class{
    color: red;
  }
}

并获取此代码：

.one .two,
.one_1,
.one_other,
.class{
    color: red;
}
css
Martin Hope
kizoso
Asked: 2020-05-09 00:34:46 +0000 UTC
  • 4

通过计数器的值来制作一个风格化的列表是很方便的，但是content你只能在里面放列表元素的序号。可以复合吗？我想在输出后立即有一个数字，然后有一个点。像这样的东西：

content:counter(olNum)+'.';

但是这种记录并没有给出任何结果，而且编号根本不起作用。

这是一个工作示例：

ol {
  margin: 0;
  padding: 0;
  counter-reset: olNum;
  list-style: none;
}

li {
  position: relative;
  margin-bottom: 2px;
  padding-left: 50px;
}

li:before {
  counter-increment: olNum;
  content: counter(olNum);
  position: absolute;
  top: 1px;
  left: 1px;
  font-weight: bold;
  color: red;
}
<ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ol>

html
Martin Hope
kizoso
Asked: 2020-04-10 17:22:35 +0000 UTC
  • 4

有一个带有照片的 OwlCarousel，双击它时应该会打开fancybox画廊。
事实是，默认情况下，只需单击一下即可打开图库。
有时甚至只是试图滑动轮播会打开一个模式窗口，这不应该是。
想禁止一键打开fansibox，双一听。
我可以取消第一次单击，发生双击，但未检测到 fancibox ..：

function init() {
  initFancybox();
  initGallerySlider();
}

window.onload = init;


function initGallerySlider() {
  $('.gallery').owlCarousel({
    loop: true,
    margin: 0,
    autoWidth: true
  });
}

function initFancybox() {
  $(document).on('fancybox.init', '.fancybox', function() {
    var
      defaults = {
        maxWidth: 994,
        autoResize: true,
        padding: 0,
        helpers: {
          media: {},
          overlay: {}
        }
      },
      $el = $(this),
      group = $el.attr('data-fancybox-group'),
      options = eval('[' + $el.data('fancybox-options') + ']')[0];

    if (group) $el = $('[data-fancybox-group="' + group + '"]');

    $.extend(defaults, options);

    $el.fancybox(defaults);
  });

  $('.fancybox').trigger('fancybox.init');
}

$('[data-fancybox="gallery"]').click(function(e) {
  e.preventDefault();
});
$('[data-fancybox="gallery"]').dblclick(function() {
  $(this).fancybox();
});
.gallery__item {
  display: block;
  height: 200px;
  width: 200px;
  background-size: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="gallery owl-carousel">
        <a href="https://i0.wallpaperscraft.com/image/usa_california_san_francisco_night_panorama_69288_300x300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(https://i0.wallpaperscraft.com/image/usa_california_san_francisco_night_panorama_69288_300x300.jpg);"></a>
        <a href="http://i0.wallpaperscraft.ru/image/sirs-tauer_neboskrb_chikago_ssha_hdr_47960_300x300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(http://i0.wallpaperscraft.ru/image/sirs-tauer_neboskrb_chikago_ssha_hdr_47960_300x300.jpg);"></a>
        <a href="http://i0.wallpaperscraft.ru/image/ulica_karla_libknehta_panorama_ekaterinburg_rossiya_28661_300x300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(http://i0.wallpaperscraft.ru/image/ulica_karla_libknehta_panorama_ekaterinburg_rossiya_28661_300x300.jpg);"></a>
        <a href="https://weatherbyhealthcare.scdn5.secure.raxcdn.com/blog/wp-content/uploads/2015/03/pennsylvania_destination_300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(https://weatherbyhealthcare.scdn5.secure.raxcdn.com/blog/wp-content/uploads/2015/03/pennsylvania_destination_300.jpg);"></a>
        <a href="http://2015.ctbuh.org/wp-content/uploads/2015/05/Chicago_sunrise_cDanielSchwen-300x300.jpg" class="gallery__item" data-fancybox="gallery" style="background-image: url(http://2015.ctbuh.org/wp-content/uploads/2015/05/Chicago_sunrise_cDanielSchwen-300x300.jpg);"></a>
      </div>
      <!--.gallery.owl-carousel-->
    </div>
    <!--col-->
  </div>
  <!--.row-->
</div>
<!--.container-->

javascript
Martin Hope
kizoso
Asked: 2020-03-11 17:14:52 +0000 UTC
  • 4

是否可以只使用 css以便当您将鼠标悬停在具有子菜单的菜单上时，会出现一个覆盖整个页面的背景，不包括菜单本身和带有提升的z-index. 重要的是，通过从子菜单中删除光标或从子菜单中删除菜单项，应该删除背景。我想得到这个结果：

期望的结果

我在下拉菜单中添加了背景，但我得到了闪烁效果，并且菜单本身被背景覆盖：

.text {
  position: relative;
  padding: 15px;
  background: linear-gradient(to bottom, rgba(206, 220, 231, 1) 0%, rgba(89, 106, 114, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72', GradientType=0);
}

nav {
  position: relative;
  z-index: 99;
  padding: 0;
  color: #fff;
  background-color: #1a2fb0;
}

ul {
  display: table;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}

li {
  position: relative;
  display: table-cell;
  border: 1px solid #6876cb;
}

a {
  display: block;
  padding: 5px;
  text-align: center;
  color: #fff;
}

.dropdown {
  display: none;
  position: absolute;
  z-index: 100;
  padding: 5px;
  font-size: 20px;
  color: #1e2faa;
  background-color: #fff;
  box-shadow: 15px 0 15px rgba(0, 0, 0, 0.05);
}

li:hover .dropdown {
  display: flex;
}

.dropdown-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 100vh;
  width: 100vw;
  background: rgba(11, 11, 46, 0.7);
}

a:hover~.dropdown-bg,
.dropdown:hover~.dropdown-bg {
  display: block;
}
<div class=text style="z-index:200">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<nav>
  <ul>
    <li>
      <a href="#">Первый +</a>
      <div class=dropdown>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div class="dropdown-bg"></div>
    </li>
    <li>
      <a href="#">Второй +</a>
      <div class=dropdown>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div class="dropdown-bg"></div>
    </li>
    <li><a href="#">Третий</a></li>
    <li><a href="#">Четвертый</a></li>
  </ul>
</nav>

<div class=text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class=text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class=text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class=text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class=text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class=text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class=text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class=text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class=text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

html
Martin Hope
kizoso
Asked: 2020-02-26 15:29:00 +0000 UTC
  • 7

特定字符可能无法以连接的字体显示的原因是什么？就我而言，这是一个不间断的空间&nbsp;。我正在使用本地连接的字体“Futuris”。添加常规空格时，会显示单词之间的间隙。但是当添加一个不间断的空格（甚至几个）时，它是粗体样式的，不显示断点。我这样连接：

@font-face {
  font-family: 'Futuris';
  src: url('Futuris-Bold.eot');
  src: url('Futuris-Bold.woff2') format('woff2'),
  url('Futuris-Bold.woff') format('woff'),
  url('Futuris-Bold.ttf') format('truetype'),
  url('Futuris-Bold.svg#Futuris-Bold') format('svg'),
  url('Futuris-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: 700;
  font-style: normal;
}

h2 {
  font-family: 'Futuris', sans-serif;
  font-weight: 700;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <h2>а&nbsp;бб&nbsp;ввв</h2>
</body>

</html>

不幸的是，我无法在此处重现该示例，因为无法在此处上传字体。我怀疑您可以以某种方式手动修复字体文件，例如 - * .ttf 通过在此处添加空格，但我不知道如何正确执行。也许有一种方法可以将样式挂在特殊字符上？

可重现的例子。

UPD：如果您可以使用FontForge删除一个字符，那么事实证明您可以添加它，但是在哪里以及如何在表格中找到一个不间断的空格？

FontForge: Futuris-Bold.ttf

html
Martin Hope
kizoso
Asked: 2020-02-24 17:26:11 +0000 UTC
  • 3

按颜色排列的元素必须成组。当悬停在一种颜色上时，所有其他相同的颜色都会做出反应。单击组中的任何元素时，您需要点击指向 svg 外部 id 的链接。如何在 svg 之外建立外部链接？

.section {
  min-height: 100vh;
  width: 800px;
  margin: 0 auto;
}

svg {
  background: url(http://joxi.net/Vrwpzx6SOxWRQm.png) no-repeat 0 0;
}

g {
  opacity: .7;
}

g:hover {
  opacity: .5;
}
<section class="section">
  <svg width="800" height="400">
    <g href="#red" fill-opacity=".5" fill="#ed4543" stroke="#ed4543" stroke-width="4">
      <polygon points="498,96 553,70 571,116 514,139"/>
      <polygon points="158,328 203,310 223,369 176,383"/>
    </g>

    <g href="#green" fill-opacity=".5" fill="#1bad03" stroke="#1bad03" stroke-width="4">
      <polygon points="242,295 286,277 302,316 259,339"/>
      <polygon points="425,228 472,215 500,260 441,277"/>
    </g>

    <g href="#blue" fill-opacity=".5" fill="#1e98ff" stroke="#1e98ff" stroke-width="4">
      <polygon points="138,246 170,229 185,270 154,287"/>
      <polygon points="250,170 305,160 324,210 270,222"/>
    </g>
  </svg>
</section>
<section id="red" class="section">
  <h1>Красный</h1>
</section>
<section id="green" class="section">
  <h1>Зеленый</h1>
</section>
<section id="blue" class="section">
  <h1>Синий</h1>
</section>

html
Martin Hope
kizoso
Asked: 2020-10-17 18:28:22 +0000 UTC
  • 4

为了不显示空 div，我使用:empty. 但是你不仅需要隐藏空的div，还需要隐藏内容被设置样式的div，display:none它只是看起来是空的，实际上里面有html代码。有没有办法隐藏这样的块？最好只有css.

div {
  display: inline-block;
  background: purple;
  color: white;
  padding: 1rem;
}
div:empty{
  display:none;
}
<br>Див:
<br><div>123</div>
<br><br>
<br>Див с пробелом:
<br><div>&nbsp;</div>
<br><br>
<br>Пустой див:
<br><div></div>
<br><br>
<br>Див с содержимим:
<br><div>
  <section>456</section>
</div>
<br><br>
<br>Див с содержимим со стилем display:none:
<br><div>
  <section style="display: none;">789</section>
</div>
<br><br>

html
Martin Hope
kizoso
Asked: 2020-08-22 16:53:39 +0000 UTC
  • 27

假设我们有代码：

div {
  position: relative;
  background: blueviolet;
  height:100px;
}

div:before {
  content: 'продано';
  color: white;
}
<div></div>

我想用相同的元素填充整个 div，使它看起来像这样：

div {
  position: relative;
  background: blueviolet;
  height: 100px;
}

div:before {
  content: 'продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано ';
  color: white;
}
<div></div>

是否可以为内容提供类似重复内容的内容，这样我们就不必手动编写所有重复内容？另外，div的大小是事先不知道的。

UPD 我想获得一个跨浏览器的解决方案。

html
Martin Hope
kizoso
Asked: 2020-08-10 18:56:00 +0000 UTC
  • 13

有必要为这些块自适应地布置连接线：

布局

是否可以将css一行的开头写在一个relative块中，而将结尾写在另一个块中？是否有这样的解决css方案svg？Js我不想仅仅为了这些线路而搞砸。

对于固定宽度的块，没有问题，一切正常，如果文本没有改变，那么一切正常：

*,
*:before,
*:after {
  box-sizing: border-box;
}

.wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  margin: 1rem auto;
}

.item {
  position: relative;
  width: 100%;
  min-height: 1px;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  padding: 0 1rem;
  margin: 0 0 2rem
}

.item__num {
  position: relative;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  font: 400 1.5rem/2rem sans-serif;
  color: #fff;
  background: cadetblue;
}

.item__num span {
  position: relative;
  z-index: 2;
}

.item__num_lg {
  margin-top: .5rem;
  height: 3rem;
  width: 3rem;
  font: 400 2.5rem/3rem sans-serif;
}

.item__text {
  position: relative;
  z-index: 3;
  display: block;
  padding: 1rem;
  margin: .5rem -1rem 0;
  font: 400 1rem/1.4 sans-serif;
  color: gray;
  background: rgba(255, 255, 255, 0.8);
}


/*мое не адаптивное решение:*/

.item__num:before {
  content: '';
  position: absolute;
  z-index: 1;
  height: .5rem;
  background: cadetblue;
}

.wrapper .item:nth-child(1) .item__num:before {
  top: 1.25rem;
  left: 50%;
  width: 166px;
  transform: rotate(7deg);
}

.wrapper .item:nth-child(2) .item__num:before {
  top: .75rem;
  left: 50%;
  width: 166px;
  transform: rotate(-7deg);
}

.wrapper .item:nth-child(4) .item__num:before {
  top: -93px;
  left: -46px;
  width: 300px;
  transform: rotate(-55deg);
}

.wrapper .item:nth-child(5) .item__num:before {
  top: 1.25rem;
  left: 50%;
  width: 166px;
  transform: rotate(7deg);
}
<link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" />

<div class=wrapper>
  <div class=item>
    <div class=item__num><span>1</span></div>
    <div class=item__text>Текст короткий</div>
  </div>

  <div class=item>
    <div class="item__num item__num_lg"><span>2</span></div>
    <div class=item__text>Текст немного побольше, возможно в две строки, возможно в одну</div>
  </div>

  <div class=item>
    <div class=item__num><span>3</span></div>
    <div class=item__text>Текст небольшой, средний текст</div>
  </div>

  <div class=item>
    <div class="item__num item__num_lg"><span>4</span></div>
    <div class=item__text>Текст немного побольше, возможно в две строки, возможно в одну</div>
  </div>

  <div class=item>
    <div class=item__num><span>5</span></div>
    <div class=item__text>Текст небольшой, средний текст</div>
  </div>

  <div class=item>
    <div class="item__num item__num_lg"><span>6</span></div>
    <div class=item__text>Текст короткий</div>
  </div>
</div>

如何对自适应块做同样的事情？

*,
*:before,
*:after {
  box-sizing: border-box;
}

.wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 1rem auto;
}

.item {
  position: relative;
  width: 100%;
  min-height: 1px;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  padding: 0 1rem;
  margin: 0 0 2rem
}

.item__num {
  position: relative;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  font: 400 1.5rem/2rem sans-serif;
  color: #fff;
  background: cadetblue;
}

.item__num span {
  position: relative;
  z-index: 2;
}

.item__num_lg {
  margin-top: .5rem;
  height: 3rem;
  width: 3rem;
  font: 400 2.5rem/3rem sans-serif;
}

.item__text {
  position: relative;
  z-index: 3;
  display: block;
  padding: 1rem;
  margin: .5rem -1rem 0;
  font: 400 1rem/1.4 sans-serif;
  color: gray;
  background: rgba(255, 255, 255, 0.8);
}


/*мое не адаптивное решение:*/

.item__num:before {
  content: '';
  position: absolute;
  z-index: 1;
  height: .5rem;
  background: cadetblue;
}

.wrapper .item:nth-child(1) .item__num:before {
  top: 1.25rem;
  left: 50%;
  width: 166px;
  transform: rotate(7deg);
}

.wrapper .item:nth-child(2) .item__num:before {
  top: .75rem;
  left: 50%;
  width: 166px;
  transform: rotate(-7deg);
}

.wrapper .item:nth-child(4) .item__num:before {
  top: -93px;
  left: -46px;
  width: 300px;
  transform: rotate(-55deg);
}

.wrapper .item:nth-child(5) .item__num:before {
  top: 1.25rem;
  left: 50%;
  width: 166px;
  transform: rotate(7deg);
}
<link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" />

<div class=wrapper>
  <div class=item>
    <div class=item__num><span>1</span></div>
    <div class=item__text>Текст короткий</div>
  </div>

  <div class=item>
    <div class="item__num item__num_lg"><span>2</span></div>
    <div class=item__text>Текст немного побольше, возможно в две строки, возможно в одну</div>
  </div>

  <div class=item>
    <div class=item__num><span>3</span></div>
    <div class=item__text>Текст небольшой, средний текст</div>
  </div>

  <div class=item>
    <div class="item__num item__num_lg"><span>4</span></div>
    <div class=item__text>Текст немного побольше, возможно в две строки, возможно в одну</div>
  </div>

  <div class=item>
    <div class=item__num><span>5</span></div>
    <div class=item__text>Текст небольшой, средний текст</div>
  </div>

  <div class=item>
    <div class="item__num item__num_lg"><span>6</span></div>
    <div class=item__text>Текст короткий</div>
  </div>
</div>

html
Martin Hope
kizoso
Asked: 2020-05-29 14:46:29 +0000 UTC
  • 10

您需要使自适应块的标题旋转。问题在于块是自适应的，宽度相对于屏幕变化，高度可以任意不同，具体取决于内部内容。转弯的时候需要考虑转弯时方块会移动什么宽度和高度，结果却不一样。文字移出，因为宽度变成高度，高度变成宽度。帮助我理解。

如何保持文本的比例？添加另一个包装器并反转？有可能只有css吗？

期望的结果，标题（红色）应该居中，垂直和水平：

在此处输入图像描述

现在像这样：

在此处输入图像描述

代码示例：

.block{
  position:relative;
  padding-left:5rem;
  margin:0 auto;
  width:50%;
}
.pin{
  position:absolute;
  display:block;
  top:0;
  left:0;
  bottom:0;
  width:3rem;
  height:100%;
  background:rgba(221, 221, 221, 0.5);
}
.pin span{
  position:absolute;
  display:inline-block;
  top:0;
  left:0;
  right:0;
  bottom:0;
  vertical-align:bottom;
  text-align:center;
  transform:rotate(-90deg);
  background:rgba(221, 221, 221, 0.5);
  color:red;
}
<div class="block">
  <div class="pin"><span>Заголовок</span></div>
  
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
</div>

html
Martin Hope
kizoso
Asked: 2020-04-27 19:01:43 +0000 UTC
  • 4

大型项目，SASS使用语法SASS而不是SCSS. 因此，将文件更改SCSS为不是一种选择，因为它们有很多。

您需要使用这种关联数组（地图）：

$primary-colors: (
  "red":   "#ff0000",
  "green": "#00ff00",
  "blue":  "#0000ff"
);

这是SCSS我需要的语法SASS。编译器对这种结构发誓：

错误：未闭合的括号

在 style/_intro-val.sass 的第 394 行

$原色: ( { ------------------^

如何修复拼写？有没有人遇到过这样的问题？也许用其他字符替换括号还是应该定义缩进？

вёрстка
Martin Hope
kizoso
Asked: 2020-03-24 14:52:49 +0000 UTC
  • 5

是否有可能只用 css/html 来制作这样的东西placeholder：

复杂的占位符

我的意思是里面的文字placeholder，一部分是一种风格，一部分是另一种风格，包括虚线下划线

.search{
  position:relative;
  margin:26px 0 2px;
}
.search-input{
  border: 1px solid #d8d8d8;
  display: block;
  width: 100%;
  height: 52px;
  font-size: 14px;
  padding: 12px 57px 12px 20px;
  -webkit-border-radius: 52px;
  -moz-border-radius: 52px;
  border-radius: 52px;
}
.search-btn{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  background:url("https://isstatic.askoverflow.dev/9vArC.png") no-repeat center center;
  width:54px;
  padding:0;
  border:none;
}
<div class="search">
  <input class="search-input" type="search" placeholder="Например: Артикул a2343-JFKLFLI3920ee">
  <input class="search-btn" type="button">
</div>

html
Martin Hope
kizoso
Asked: 2020-03-20 08:07:48 +0000 UTC
  • 2

如何使 div 相对于父级垂直对齐，以及如何使块中表格行中的单元格水平对齐，其高度会按其高度的 100% 变化，并且高度未明确设置。

例如，您可以这样做：

.block{
  position:relative;
  display:table;
  width:100%;
  table-layout:fixed;
  border-spacing:0;
  border-collapse:collapse;
}
.item{
  position:relative;
  display:table-cell;
  padding:5px;
  vertical-align:middle;
}
.item_1{background:#1e2faa}
.item_2{background:#aa5e67}
.item_3{background:#32aa4a}
.item_4{background:#a4aa53}
<div class="block">
  <div class="item item_1">1</div>
  <div class="item item_2">2</div>
  <div class="item item_3">3</div>
  <div class="item item_4">4</div>
</div>

并且内部单元格将相对于宽度拉伸，大小相等。我想做同样的事情，但垂直。使块相对于父 div 拉伸，父 div 将根据内容拉伸。而且，内容可能少于块，并且可能有不同数量的块。也就是说，绝对定位消失了，因为方块会飞出边界。结构应该是这样的：

.parent{
  background:#aaa;
  position:relative;
  overflow:hidden;
}
.block{
  position:relative;
  display:table;
  float:left;
  width:25%;
  height:100%;
  table-layout:fixed;
  border-spacing:0;
  border-collapse:collapse;
}
.item{
  position:relative;
  display:table-cell;
  padding:5px;
  vertical-align:middle;
}
.item_1{background:#1e2faa}
.item_2{background:#aa5e67}
.item_3{background:#32aa4a}
.item_4{background:#a4aa53}
<div class="parent">
  <div class="block">
<div class="item item_1">1</div>
<div class="item item_2">2</div>
<div class="item item_3">3</div>
<div class="item item_4">4</div>
  </div>
  <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div>

也就是说，你需要这样做，块是自适应的： 在此处输入图像描述

html