主页 / 问题 / 1508683
Accepted
MrP
Asked:2023-03-28 10:31:20 +0000 UTC2023-03-28 10:31:20 +0000 UTC

和float: left一样，在细节里面留下照片

  • 772

没有浮动：左

details { 
cursor: pointer; 
border: 1px solid #aaa; 
border-radius: 4px; 
padding: 0.5em 0.5em 0; 
margin-top:5px; 
min-width: 400px; 
} 
summary { 
margin: -0.5em -0.5em 0; 
padding: 0.5em; 
} 
details[open] { 
padding: 0.5em; 
} 
details[open] summary { 
border-bottom: 1px solid #aaa; 
margin-bottom: 0.5em; 
}
<details open="">
<summary>
<span style="font-size:14px;">
<span style="font-family:Georgia,serif;">Доп. Информация
</span>
</span>
</summary>
<div><img alt="" src="https://img.gazeta.ru/files3/34/14989034/59051691-10915089-image-m-34_165-pic_32ratio_900x600-900x600-67347.jpg" style="width: 350px; height: 200px;" /></div>
asdasdasd
</details>

向左飘浮

details { 
    cursor: pointer; 
    border: 1px solid #aaa; 
    border-radius: 4px; 
    padding: 0.5em 0.5em 0; 
    margin-top:5px; 
    min-width: 400px; 
    } 
    summary { 
    margin: -0.5em -0.5em 0; 
    padding: 0.5em; 
    } 
    details[open] { 
    padding: 0.5em; 
    } 
    details[open] summary { 
    border-bottom: 1px solid #aaa; 
    margin-bottom: 0.5em; 
    }
    <details open="">
    <summary>
    <span style="font-size:14px;">
    <span style="font-family:Georgia,serif;">Доп. Информация
    </span>
    </span>
    </summary>
    <div style="float:left"><img alt="" src="https://img.gazeta.ru/files3/34/14989034/59051691-10915089-image-m-34_165-pic_32ratio_900x600-900x600-67347.jpg" style="width: 350px; height: 200px;" /></div>
    asdasdasd
    </details>

html

1 个回答

  1. Best Answer

    在“详细信息”中添加 - “溢出：自动；” 和伪类“：after”在代码中也描述了样式。

    details { 
  cursor: pointer; 
  border: 1px solid #aaa; 
  border-radius: 4px; 
  padding: 0.5em 0.5em 0; 
  margin-top:5px; 
  min-width: 400px;
  overflow: auto;
}
details::after {
  content: "";
  clear: both;
  display: table;
}
summary { 
  margin: -0.5em -0.5em 0; 
  padding: 0.5em; 
} 
details[open] { 
  padding: 0.5em; 
} 
details[open] summary { 
  border-bottom: 1px solid #aaa; 
  margin-bottom: 0.5em; 
}
    <details open="">
    <summary>
    <span style="font-size:14px;">
    <span style="font-family:Georgia,serif;">Доп. Информация
    </span>
    </span>
    </summary>
    <div style="float:left"><img alt="" src="https://img.gazeta.ru/files3/34/14989034/59051691-10915089-image-m-34_165-pic_32ratio_900x600-900x600-67347.jpg" style="width: 350px; height: 200px;" /></div>
    asdasdasd
    </details>

    • 0

相关问题