Discussion :

[Nanais19]

Bonjour,

Alors voilà comme le dit explicitement le titre j'ai un div dont la propriété width ne s'adapte a son contenu.

Le contenu de celui ci est plusieurs images. Voici le code :

Code asp :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="lst_ViewImg" style="width:100%; overflow:auto; border:solid red 1px;" >
    <asp:ListView runat="server" ID="lv_img" GroupItemCount="40" EnableViewState="false" >
        <LayoutTemplate>
            <asp:Placeholder id="groupPlaceholder" runat="server" />
        </LayoutTemplate>
        <GroupTemplate>
            <div style="overflow:auto; display:inline; clear:both; border:solid green 2px; ">
                <asp:Placeholder id="itemPlaceholder" runat="server" />
            </div>
        </GroupTemplate>
        <ItemTemplate>
            <asp:Image runat="server" CssClass="lv_Img" ImageUrl='<%# "data:image/jpg;base64," + Convert.ToBase64String((byte[])Eval("image_thumb")) %>' Width="250px" Height="100px" />
        </ItemTemplate>
    </asp:ListView>
</div>

Et voici le css de ma classe lv_Img:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.lv_Img {
display:block;
float:left;
margin:5px;
border:solid yellow 2px;
}

Avec les couleurs des bordures je constate bien que mon div dans le GroupTemplate (lorsque je le met en display:block-inline) qu'il ne depasse pas le cotenue du div parent (lst_ViewImg).

Les seules fois où j'y arrive en mettant mon div de itemgroup avec la propriété display:block et que je force sa taille manuellement comme width:200%;

A ce moment là mes images sont bien toutes alignées sur la seule et même ligne.

Comment puis je arriver à faire en sorte que la taille s'adapte automatiquement sans avoir besoin de la forcer manuellement ?

(j'ai aussi testé en mettant max-width:200%; et sa ne change rien, le div reste quand même bloquer à son 100% !)

[Bovino]

Merci de lire : Important : Les règles incontournables d'utilisation de ce forum !

Le code serveur ne nous intéresse pas ! C'est celui (HTML) affiché par le navigateur qui fait foi et qui permet de donner des réponses appropriées.

[Invité]

Bonjour,

... comme le dit explicitement le titre ...

Benh non, ce n'était pas aussi explicite que ça...

(j'ai aussi testé en mettant max-width:200%; et sa ne change rien, le div reste quand même bloquer à son 100% !)

en fait, tu veux que le "contenu" soit PLUS GRAND que le "conteneur" !

Il me semble qu'il faut mettre
- le <div> "conteneur" en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
position: relative; 
overflow:hidden; /* pour masquer ce qui déborde du "contenu"*/

- le <div> "contenu" en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
position: absolute; 
top:0; left:0; /* positionne le "contenu" par rapport au "conteneur" */
max-width:200%; /* pour le faire déborder */

On peut alors "jouer" sur la position du "contenu" (images) en modifiant : left:...px;