ciao!
provo a spiegarmi ma non sarà facile.
io ho una struttura con una lista di oggetti messi uno accanto all'altro.
dentro ogni oggetto ci sono altre elementi che vengono visualizzati al click (tramite jquery).
ovviamente il sotto elemento ha la stessa larghezza dell'elemento padre.
a me servirebbe che sia a larghezza piena della riga.
questo l'html:
codice:
<div class="mkdf-bl-wrapper mkdf-outer-space">
<ul class="mkdf-blog-list">
<li class="mkdf-bl-item mkdf-item-space">
<div class="mkdf-bli-inner">
<div class="mkdf-post-image">
<img fetchpriority="high" decoding="async" width="1300" height="950"
src="https://dreamy-johnson.217-64-205-93.plesk.page/wp-content/uploads/2024/06/m_w-4.webp"
class="attachment-full size-full wp-post-image img_btn" id="125cc" alt="Moto">
<div id="div_125cc" class="div_hidden" style="display: block;">
<ul>
<li>UNO</li>
<li>DUE</li>
<li>TRE</li>
</ul>
</div>
</div>
</div>
</li>
<li class="mkdf-bl-item mkdf-item-space">
<div class="mkdf-bli-inner">
<div class="mkdf-post-image">
<img fetchpriority="high" decoding="async" width="1300" height="950"
src="https://dreamy-johnson.217-64-205-93.plesk.page/wp-content/uploads/2024/06/m_w-1.webp"
class="attachment-full size-full wp-post-image img_btn" id="adventure" alt="Moto">
<div id="div_adventure" class="div_hidden">
<ul>
<li>UNO</li>
<li>DUE</li>
<li>TRE</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
su i div div_hidden (che sono quelli mostrati da jquery) ho provato a mettere queste regole CSS:
codice:
.div_hidden {
display: none;
background: #dedede;
}
.div_hidden ul {
display: grid;
grid-template-columns: repeat(3, 33.33%);
width: calc(300% + 4px);
margin: 0;
padding: 0;
align-items: stretch;
box-sizing: border-box;
background: #dedede;
list-style-type: none;
}
ovviamente senza successo.
qualche idea??