小编Tom*_*sco的帖子

我的想法是给出一个自适应div宽度.当我只有一个项目时,宽度应该与容器div中的项目相同.

有关如何做到这一点的任何建议？

示例:http://codepen.io/tomasfrancisco/pen/PNvLLw

HTML:

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div id="container">
  <div class="item"></div>
</div>

CSS:

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 200px;
  padding: 10px;
  margin: 20px;
  background-color: blue;
}
#container .item {
  width: 80px;
  height: 50px;
  background-color: red;
  margin: 10px;
}

我试图做类似这样.

但我不知道为什么我没有把这件事搞定.这是codepen 示例:

$('input').on('change', function(e) {

  var file = e.currentTarget.files[0];

  var reader = new FileReader();

  reader.onload = function(e) {
    $('audio source').attr('src', e.target.result);
  }   

  reader.readAsDataURL(file);
});

源标记正在接收base64 mp3文件,但它不会将文件加载到浏览器中.