小编tom*_*657的帖子

为什么弹性项目不会缩小内容大小?

我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.

我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.

观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)

我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗?

我不能用overflow-x: hidden.

的jsfiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div> …
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

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

mPDF位置绝对

我需要从HTML输入生成PDF文件:

<div style="width: 14cm; height: 21cm; position: relative">
  <img src="bg-image.jpg" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0">
  <img src="image.jpg" style="width: 100px; height: 100px; position: absolute; left: 5cm; top: 5cm">
</div>
Run Code Online (Sandbox Code Playgroud)

其中第一个图像是背景,第二个图像是用户输入(较小的照片).

问题是当我尝试使用mPDF库生成PDF文件时,图像不会显示在一个页面上,但是一个图像在第一页上,第二个图像在第二页上.所以我认为绝对定位不起作用,我不知道如何解决它.我不能将第一张图像用作背景图像,因为它的自然尺寸小于它必须填充的背景区域.

你能给我一些建议吗?怎么了?

position absolute mpdf

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

jQuery UI可拖动+ iframe中的可排序 - 错误的垂直偏移

我正在解决这个问题,我不知道该怎么做.

情况:我在页面顶部有可拖动的元素,在iframe中有一些可排序的持有者.当我尝试将元素拖动到iframe时,它工作正常.但是,当iframe向下滚动并开始拖动可拖动元素时,它会连接到iframe中的第一个可排序的持有者,而不是连接到当前位于iframe可见部分顶部的可排序持有者.

js完整代码: https ://jsfiddle.net/0d420qpj/

屏幕视频:http://screencast-o-matic.com/watch/coltDdhakq

观看视频,您将看到问题在于行动.

$(".drag").draggable({ 
      helper : "clone",
      iframeFix: $('#iframe'),
      iframeOffset: $('#iframe').offset(),
      connectToSortable : f.find(".sort_holder"),
      distance : 10,
      cursorAt: { left: 20, top : 20},
      scroll : true,
      start: function(event, ui) { 

      },
      drag: function(event, ui) { 

      },
      stop: function(event, ui) { 

      }
    });
Run Code Online (Sandbox Code Playgroud)

能帮我解决这个问题吗?

iframe jquery drag-and-drop offset jquery-ui-sortable

9
推荐指数
1
解决办法
1254
查看次数

Chromecast没有播放多个HTML5视频

我在单页上有2个视频播放器.在桌面上,一切正常,两个视频播放器都在播放视频.但是,当我尝试将此页面投射到Chromecast时(通过Google Chrome扩展程序或通过https://demille.github.io/url-cast-receiver/),只有第一个视频播放器处于活动状态且正在播放,第二个视频播放器无效.

我尝试调试它,看起来第二个视频在视频readyState = 1结束(第一个视频有readyState = 4)

有办法解决这个问题吗?(我在单页上需要多个视频播放器,所以只使用一个播放器并切换视频文件URL不是解决方案)

网址:http://iuvomedia.eu/chromecast/

video html5 video-streaming html5-video chromecast

9
推荐指数
2
解决办法
733
查看次数