使用浮动，清除，显示的布局问题 - 不了解何时使用什么 - 不正确的编码

时间：2017-09-03 16:05:48

标签： html css

我正在创建一个图片上传结果框，不知怎的，我设法给它正确的布局，但结果框的元素似乎没有在'Brackets View＆＃39;

在使用浮子，清除和显示时，我很挣扎。我感到很困惑，到目前为止我已经尝试过4-5次但是在某个地方我没有正确应用它们。

有人可以在解释何时何地使用它们时指导我完成此代码。

此外，我使用这种技术来清除浮动，但有时它可以工作，有时没有任何反应：

.example
{
   content: ' ';
   display: block;
   clear: both;
}

我的HTML＆amp; CSS：

＆＃13;
＆＃13; 
.files-bar {
  width: 100%;
  max-width: 700px;
  margin: 20px auto;
  padding: 15px;
  overflow: auto;
  border: 1px solid #BBBBBB;
  box-shadow: 2px 3px 15px #E7E7E7;
}

.delete {
  float: right;
  background-color: #02BFC1;
  color: #FFFFFF;
  font-family: gothic;
  width: 100%;
  max-width: 75px;
  border: 1px solid #02BFC1;
  font-size: 10pt;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.image-thumb {
  float: left;
  display: inline;
  width: 160px;
  height: 120px;
  margin-right: 20px;
}

.img-thumb:after {
  content: '';
  display: block;
  clear: both;
}

.image-name {
  font-size: 17pt;
  margin-top: 2px;
}

.image-size {
  font-size: 13pt;
  margin: 20px 0;
}

.file-status {
  display: block;
  font-size: 12pt;
  margin-bottom: 10px;
}

.progress-wrap {
  float: left;
  width: 300px;
  height: 20px;
  color: #111;
  height: 5px;
  margin-top: 5px;
}

.progress-meter {
  max-width: 300px;
  height: 5px;
  background: #02BFC1;
}

.up {
  margin-left: 30px;
}

.cancel-upload {
  float: left;
  margin: -25px 0 0 -15px;
}
＆＃13; 
<div class="files-bar">
  <button class="manage-btn delete">Delete</button>
  <img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
  <p class="image-name">14217596f69f44507b.jpg</p>
  <p class="image-size">22 KB</p>
  <p class="file-status">File Uploaded Successfully!</p>
  <div class="progress-wrap">
    <!-- Progress bar -->
    <div class="progress-meter"></div>
  </div>
  <p class="cancel-upload">&#10006;</p>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

Float不是一个很好的布局策略，因为它需要使用clear:both管理浮动。 clear将清除之前定义的任何浮点数，在这种情况下，您的删除按钮会向右浮动。

请参阅float和clear属性的此快速参考。

正如上面的评论所述，使用display:flex可以更好地控制布局。这是一个对原始代码进行最小更改的解决方案。我在display:flex定义的容器上设置了div files-bar，为progress创建了一个容器，为delete按钮创建了一个容器。与img一起，这些兄弟元素是flex项目。这是一个关于使用flex的好教程。

完整的代码：

.files-bar
{
   width: 100%;
   max-width: 700px;
   margin: 20px auto;
   padding: 15px;
   overflow: auto;
   border: 1px solid #BBBBBB;
   box-shadow: 2px 3px 15px #E7E7E7;
   display:flex;
}

.delete
{
   background-color: #02BFC1;
   color: #FFFFFF;
   font-family: gothic;
   max-width: 75px;
   border: 1px solid #02BFC1;
   font-size: 10pt;
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
   display:inline-block;
}

.button-cell {
  text-align:right;
  flex-grow:1;
}

.image-thumb
{
   display: inline;
   width: 160px;
   height: 120px;
   margin-right: 20px;
}

.image-name
{
   font-size: 17pt;
   margin-top: 2px;
}

.image-size
{   
   font-size: 13pt;
   margin: 20px 0;
}

.file-status
{
   display: block;
   font-size: 12pt;
   margin-bottom: 10px;
}

.progress-wrap
{
   float: left;
   width: 300px;
   height: 20px;
   color: #111;
   height: 5px;
   margin-top: 5px;
}

.progress-meter
{
   max-width: 300px;
   height: 5px;
   background: #02BFC1;
}

.up
{
   margin-left: 30px;
}

.progress {
  position:relative;
}

.cancel-upload
{
   position:absolute;
   right:4px;
   bottom:2px;
}
<div class="files-bar">
    <img class="image-thumb flex-item" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
    <div class="progress">
      <p class="image-name">14217596f69f44507b.jpg</p>
      <p class="image-size">22 KB</p>
      <p class="file-status">File Uploaded Successfully!</p>
      <div class="progress-wrap"> <!-- Progress bar -->
          <div class="progress-meter"></div>
      </div>
      <p class="cancel-upload">&#10006;</p>
    </div>
    <div class="button-cell">
      <button class="manage-btn delete flex-item">Delete</button>
    </div>
</div>

更新 - 在相对定位的容器中使用绝对位置的新代码段。

请查看以下解决方案。我没有使用float，而是将元素绝对放置在files-bar容器中。这适用于任何浏览器。

.files-bar
{
   width: 100%;
   max-width: 700px;
   margin: 20px auto;
   padding: 15px;
   overflow: auto;
   border: 1px solid #BBBBBB;
   box-shadow: 2px 3px 15px #E7E7E7;
   position:relative;
}

.delete
{
   background-color: #02BFC1;
   color: #FFFFFF;
   font-family: gothic;
   max-width: 75px;
   border: 1px solid #02BFC1;
   font-size: 10pt;
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
   position:absolute;
   right:12px;
}

.image-thumb
{
   display: inline;
   width: 160px;
   height: 120px;
   margin-right: 20px;
   float:left;
}

.image-name
{
   font-size: 17pt;
   margin-top: 2px;
}

.image-size
{   
   font-size: 13pt;
   margin: 20px 0;
}

.file-status
{
   display: block;
   font-size: 12pt;
   margin-bottom: 10px;
}

.progress {
  position:absolute;
  left:185px;
}

.progress-wrap
{
   width: 300px;
   height: 20px;
   color: #111;
   height: 5px;
   margin-top: 5px;
}

.progress-meter
{
   max-width: 300px;
   height: 5px;
   background: #02BFC1;
}

.up
{
   margin-left: 30px;
}

.cancel-upload
{
   position:absolute;
   right:4px;
   bottom:2px;
}
<div class="files-bar">
    <img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
    <div class="progress">
      <p class="image-name">14217596f69f44507b.jpg</p>
      <p class="image-size">22 KB</p>
      <p class="file-status">File Uploaded Successfully!</p>
      <div class="progress-wrap"> <!-- Progress bar -->
          <div class="progress-meter"></div>
      </div>
      <p class="cancel-upload">&#10006;</p>
    </div>
    <button class="manage-btn delete flex-item">Delete</button>
</div>

答案 1 :(得分：0)

解决了布局问题！

问题是我想把图像放在左边，其他内容放在图像的右边。

但浮动的使用太多，清晰并显示它令人困惑，代码也不合适。即使使用它们我也没有得到正确的输出。由于浮动，“段落”元素也在图像后面。

所以，经过一些更多的试验后，我实现了我想要的布局而不使用'位置'和太多浮动和清晰。

我应用的内容：

  1. 首先，将图像浮动到左侧。
  2. 将所有其他内容放在图像下面的名为“rest”的div类中。
  3. 也向左浮动'休息div'。
  4. 向右浮动删除按钮。
  5. 最后我为“files-bar div”应用了Clear Fix。

    6. 很简单就是这样。所有其他因素都经过调整。我只需要将所有其他内容放在div元素中并浮动它。

    更新了HTML 

    <div class="files-bar">
    <button class="delete">Delete</button>
    <img class="image-thumb" src="profile_image/1777859bb71d37aec3.jpg">
    <div class="rest">
        <p class="image-name">14217596f69f44507b.jpg</p>
        <p class="image-size">22 KB</p>
        <p class="file-status">File Uploaded Successfully!</p>
        <p class="cancel-upload">&#10006;</p>
        <div class="progress-wrap">          
            <div class="progress-meter"></div>
        </div>
    </div>
</div>

    默认HTML的CSS已被删除，也被称为'Doctor CSS'

    更新了CSS： 

    .files-bar
{
    width: 100%;
    max-width: 600px;
    padding: 15px;
    border: 1px solid #BBBBBB;
    box-shadow: 2px 3px 15px #E7E7E7;
}

.files-bar:after
{
    clear: both;
    content: '';
    display: block;
}

.image-thumb
{
    float: left;
    width: 160px;
    height: 120px;
    margin-right: 20px;
}

.rest {float: left;}

.delete
{
    float: right;
    width: 100px;
    background-color: #02BFC1;
    color: #FFFFFF;
    font-family: gothic;
    max-width: 75px;
    border: 1px solid #02BFC1;
    font-size: 10pt;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.image-name {font-size: 17pt;}

.image-size
{   
    font-size: 13pt;
    margin: 20px 0;
}

.file-status
{
    display: inline-block;
    font-size: 12pt;
    margin-bottom: 15px;
}

.progress-wrap
{
    width: 300px;
    height: 20px;
    color: #111;
    height: 5px;
}

.progress-meter
{
    max-width: 300px;
    height: 5px;
    background: #02BFC1;
}

.cancel-upload
{
    padding: 5px;
    float: right;
    cursor: pointer;
}
相关问题
最新问题