Текстенің енін 100% ата-анаға қалай кеңейту керек (немесе кез-келген HTML элементін еншілес ені 100% дейін кеңейту әдісі)?

Текстенің енін 100% ата-анаға қалай кеңейту керек?

Мен ені 100% тырысамын, бірақ ол жұмыс істемейді, ол 100% бетіне қайсы апаттың орналасуын кеңейтеді.

Here the question in visual way. enter image description here

Пожалуйста, кейбір кеңестер беріңіз.

46
Сіз кодты көрсетуіңіз керек. Мен ата-аналар элементінде орналасуымен байланысты нәрсе бар деп ойлаймын, сондықтан мәтіндік кеңістік үшін ешқандай нүкте жоқ. Бірақ кейбір кодты көрмей сөзсіз сенімді бола алмаймын!
қосылды автор Kyle, көзі
Тиісті HTML және CSS-ді орналастырыңыз
қосылды автор Obi-Wan Spock, көзі
Еніде толтырғыштар мен шеттер жоқ. Егер сіз 100% құсбелгі жасағыңыз келсе, сіз бұғаттау үшін width: auto; параметрін орната аласыз, әйтпесе маржа мен толтырғышты түрлендіру арқылы енін есептеп шығарыңыз. қорап үлгісі туралы қосымша ақпаратты қараңыз: w3.org/TR/CSS2/box.html
қосылды автор Broxzier, көзі
Кодтан басқа сіз қандай браузерге қолдау көрсететінін көрсете аласыз ба?
қосылды автор Arkana, көзі

7 жауаптар

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

<div>
<div style="width:20%; float:left;">
 
Some Contentsssssssssss

</div> <div style="float:left;width:80%;"> </div> <div style="clear:both;"></div> </div>
</div> </div>
48
қосылды
неге біз анық түсіндірілуіміз керек: екеуі де?
қосылды автор sairfan, көзі
Шамамен жетілдірілген, оны анық қосу қажет: екеуі де;
қосылды автор Chameleon, көзі

You need to define width of the div containing the textarea and when you declare textarea, you can then set .main > textarea to have width: inherit.

Note: .main > textarea means a

Here is the working solution

HTML:

<div class="wrapper">
  <div class="left">left</div>
  <div class="main">
    


  </div>
</div>

CSS:

.wrapper {
  display: table;
  width: 100%;
}

.left {
  width: 20%;
  background: #cccccc;
  display: table-cell;
}

.main {
  width: 80%;
  background: gray;
  display: inline;
}

.main > textarea {
  width: inherit;
}
6
қосылды
Кодты конденсациялауға тырыспаңыз - бұл кодтауда ең маңызды нәрсе - қысу емес, оны оқуға оңай етеді. Жақсы шегініс - кодтың сұлулығын сақтау емес, тек код сапасы мен оқылу мүмкіндігі. Оқылатын кодты тезірек қарап шығуға болады және кем қателіктері бар (2x 4x рет).
қосылды автор Chameleon, көзі
Textarea global marke пайдаланбаңыз :)
қосылды автор Chameleon, көзі

қорап үлгісі - әрбір веб-әзірлеуші ​​туралы білуі керек нәрсе. өлшемдермен және пикселдермен толтыру үшін жұмыс істемейді. Онда әрқашан жақсы көрінбейтін (мысалы, ені 90% және ені 100 пиксельге бөлінген div-та 10px ені/маржаны беру) рұқсаты бар.

Check this out (using micro.pravi's code): http://jsbin.com/umeduh/2

<div id="container">
    <div class="left">
        <div class="content">
            left
        </div>
    </div>
    <div class="right">
        <div class="content">
            right
            


        </div>
    </div>
</div>

The <div class="content"> are there so you can use padding and margin without screwing up the floats.

this is the most important part of the CSS:

textarea {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
6
қосылды
Жақсы жақсы (құтылмаған жүзу). box-sizing == Егер CSS3 дизайны бойынша шектеуді қаламасаңыз, CSS3 ескі CSS2-ді қолданыңыз.
қосылды автор Chameleon, көзі

HTML:

<div id="left"></div>
<div id="content">
        


</div>

CSS:

body{
    width:100%;
    border:1px solid black;
    border-radius:5px;

}
#left{
    width:20%;
height:400px;
    float:left;
    border: 1px solid black;
    display:block;
}
#content{
    width:78%;
    height:400px;
    float:left;
    border:1px solid black;
    text-align:center;
}
textarea
{
   margin-top:100px;
    width:98%;
}

DEMO: HERE

1
қосылды
бұл биіктік: CSS мәнінде автоматты түрде автоматты түрде емес мән - w3.org/wiki/CSS/Properties/биіктігі ? Тазалау қажет.
қосылды автор Chameleon, көзі
Биіктігі орнатылмауы керек.
қосылды автор Chameleon, көзі
height: auto сөзін беруге тырысыңыз
қосылды автор Aravind30790, көзі

Мен мына нәрсені жасайтын едім:

HTML:

<div class="wrapper">
    <div class="side">sidebar here</div>
    <div class="main">
        


    </div>
</div><!--/ wrapper -->

CSS:

.wrapper{
    display: block;
    width: 100%;
    overflow: hidden;
}
.side{
    float:left;
    width:20%;
}
.main{
    float:right;
    width:80%;
}
.taclass{
    display:block;
    width:100%;
    padding:2%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
1
қосылды
Тазалау үшін түзетулер енгізбеңіз, бұл семантикалық емес! Оның орнына таза фиксті пайдаланыңыз.
қосылды автор Soviut, көзі
Ашық болмауы: екеуі де.
қосылды автор Chameleon, көзі
Пайыз жақсы емес, себебі салыстырмалы емес - бұл 20%, 80% және басқа ештеңе үшін жақсы.
қосылды автор Chameleon, көзі
қажет <div style = «clear: both»> тікбұрышты пішінді сақтау.
қосылды автор Chameleon, көзі
Егер сіз 95% нәрсені қаласаңыз, контейнерді толтыруға болады: 1em; (% емес!).
қосылды автор Chameleon, көзі
Өйткені, екінші div үшін table-cell анықтамадым.
қосылды автор Nitesh, көзі
Мәселе енін иелену және мәнді енін жария етпеу болып табылады. Мәнді жариялау арқылы, сіз оны стратегиялық CSS шешімі арқылы шешуге тиіс мақсатты қолмен шешесіз.
қосылды автор Nitesh, көзі
@Soviut: бұл біреуді қосқан, мен емес. Жоғарыда келтірілген кодты өзгермелі тазарту үшін жасадым
қосылды автор Qiqi Abaziz, көзі
Мен сіздердің әдістеріңізді жоғарыда көрдім, бірақ шын мәнінде қабық толығымен 100% енде емес екен?
қосылды автор Qiqi Abaziz, көзі

Бұл әрекетті орындап көріңіз. Бұл параққа қосыңыз



0
қосылды
бұл - негізгі логика, сіз арнайы атаумен стиль жасайсыз, содан кейін нақты мәтіндік кеңістікті қолданыңыз.
қосылды автор Ganesh Rengarajan, көзі
Дұрыс емес идея - ғаламдық параметрлер ешқашан жасамайды.
қосылды автор Chameleon, көзі
Ия, бірақ мысал ретінде дұрыс емес.
қосылды автор Chameleon, көзі

Css қосыңыз

  


0
қосылды
1% = белгісіз - жауапты орналасу жақсы жұмыс істей алмайды немесе жұмыс істемейді.
қосылды автор Chameleon, көзі
Менің ойымша, бұл ұялы құрылғыларда көп уақытты үнемдейді.
қосылды автор Chameleon, көзі
@Chameleon Ұсынысыңыз үшін рақмет
қосылды автор newuser, көзі