css clear: both; ne fonctionne pas avec position: absolute

J'ai configuration html où l'un des éléments doit avoir position: absolute;, afin que l'avenir des enfants peuvent être en position absolue. Le positionnement des enfants semble fonctionner fichier avec position: absolute; Mais pour une raison quelconque, l'image qui doit apparaître à droite, sous le titre apparaît à la droite du titre. J'ai passé quelques heures à méditer sur cela. J'ai aussi essayé d'ajouter position: relative; à la div avec hot_spot_item de la classe, mais qui n'a pas été fructueuse. Si vous supprimez le position: absolute; sur .hot-spot-wrapper vous remarquerez que l'image s'aligne à droite ci-dessous le titre, mais qui mess avec le positionnement absolu des enfants.

Toute aide est appréciés.

http://jsbin.com/ocetas/1/edit

MODIFIER

@jkinz merci pour la réponse détaillée. Votre solution serait, si j'ai pu comprendre que le titre et la carte sont ensemble et ils ont tous deux le même est. Le problème est un peu plus complexe, simplement parce que de la façon de faire les choses ici.

HTML est construit sur le côté serveur basé sur un fichier XML de configuration que les gens d'affaires d'utiliser à l'auteur de la page.
Cette configuration xml traite le titre et la carte en deux entités distinctes.
Cette configuration xml est analysé sur le côté serveur, élément par élément, et mis à travers le template freemarker qui génère du code html de cet article en particulier.
Ergo, le html pour le titre est générée séparément à partir de l'html pour la fabrication de la carte de ma vie misérable.
C'est l'une de beaucoup de choses, des affaires les auteurs peuvent faire avec la configuration xml.
Donc vous pouvez voir que si Il serait difficile pour moi de détecter que c'est le genre de définition xml ils ont mis en place et envelopper le titre et la carte donc je peux les aligner.
Aussi, ils peuvent contrôler individuellement l'alignement horizontal du titre et de la carte.

P. S. je suis dans un cas classique de "la production de la conception détachement syndrome". Pendant longtemps je pensais que ce n'était pas possible dans l'Industrie du Logiciel. Les architectes ont conçu et mis en œuvre la totalité backend dans un magasin qui n'a aucune expérience dans le développement de produits basés sur le web sans avoir de l'INTERFACE utilisateur développeur sur le conseil d'administration pour deux ans, et puis ils m'ont apporté pour faire l'INTERFACE utilisateur et ils ne veulent pas me plaindre de merde comment une méthode qui consiste à développer des logiciels. En tout cas merci pour votre aide.

Le <div class="block"> qui contient <div class="hot-spot-wrapper"> est flottant à droite. Est-ce que vous avez parlé? jsbin.com/uzecim/1/edit
Oui, c'est intentionnel. Mais l'image est censé apparaître juste en dessous du titre. Si je supprime que cela semble fonctionner, mais est-il un moyen pour que je puisse avoir la float: right; et toujours obtenir l'image pour la rendre correctement ?
Vous ne pouvez pas simultanément flotter l'image et de ne pas flotter. Ce qui sont que vous essayez d'accomplir en flottant? Peut-être il ya une autre méthode de réalisation de cet objectif.
Vous avez probablement raison. Je fais un peu bizarre style de swing style dynamique basée sur le serveur de configuration côté, c'est pourquoi j'ai tous ces styles en ligne. De toute façon, il me semblait avoir piraté mon chemin, merci.

OriginalL'auteur ShaggyInjun | 2013-06-28

css

Aussi longtemps que vous avez un poste déclaré, les enfants peuvent être en position absolue.

Le positionnement d'un élément absolument qu'il faut de la normale de documents de flux (flottant) ne s'applique pas, si claire ne veut pas vraiment dire quoi que ce soit depuis qu'il est à la recherche de c'est parent le plus proche avec une position déclarée (ou la fenêtre si il n'y a aucun).

Dans votre cas, un parent de l'élément avec un position:relative devrait fonctionner. Qui va vous permettre d'effacer le parent et n'ont absolument positionné des éléments d'enfant.

Edit après avoir vu le JSBin lien

Il semble que vous êtes tenté de placer des marqueurs sur une carte. Je l'ai fait un peu différemment, voici ma démarche: http://jsfiddle.net/sZq4d/

HTML

<div class="map-wrapper">
    <p>Place a marker on the map</p>
    <div class="map">
        <img src="http://placehold.it/400x400" />
        <div id="place1" class="marker" title="A nice pop-over tooltip">
            P1
        </div>
        <div id="place2" class="marker" title="This is place 2">
            P2
        </div>
    </div>
</div>

CSS

.map-wrapper {
    border: 1px solid #aaa;
    padding: 10px;
    margin: 0 auto;
    width: 400px;
}
.map-wrapper > p {
    text-align: center;
}
.map {
    /* background can be removed, height and width should match that of your map  image*/
    background-color:#eee;
    height: 400px;
    position: relative;
    width: 400px;
}
.marker {
    /* All common marker styles go here */
    background: blue;
    color: white;
    height: 20px;
    width: 20px;
    position: absolute;
}
/* I'm using pixels here, if want a more responsive style, use percentages, that way   when the map scales, the markers stay in the appropriate place*/
#place1 {
    left: 20px;
    top: 100px;
} 
#place2 {
    bottom: 40px;
    right: 150px;
}

Mais comme vous le voyez si vous ajoutez position: relative; pour le parent, l'image est toujours bloqué sur la droite.
Il semble que vous essayez de placer des marqueurs sur une carte, est-ce exact? Je voudrais l'aborder différemment. Voici ce que je voudrais faire: jsfiddle.net/sZq4d
Merci pour l'aide, la caisse de ma réponse.

OriginalL'auteur jkinz

Vous devez vous connecter pour publier un commentaire.