cari

Rumah  >  Soal Jawab  >  teks badan

Imej drop cap CSS, teks dijajarkan dalam ruang putih

<p>Saya tidak fikir ini adalah situasi dropcap setiap hari. </p> <p>Modal saya "S" ialah imej seperti ini: </p> <p>Sila ambil perhatian bahawa imej sebenar memanjang ke lajur atas. Bar atas ialah <strong>sebahagian daripada imej yang sama, mengandungi S besar dan lukisan di sebelah kiri S. </strong>Saya mewarnakan latar belakang biru supaya ia boleh dilihat dengan mudah di sini, tetapi warna semula jadi adalah putih. <em> (Tetapi sila abaikan kawasan kelabu tambahan di bahagian paling atas, ia janggal apabila melakukan tangkapan skrin.) </em>Saya tidak mahu memecahkan bar dan imej atas. Imej yang diberikan kepada saya kelihatan seperti ini - kawasan segi empat tepat dengan bar atas dilukis di sudut kanan atas dan ruang putih di bawah bar atas. </strong></p> <p>Saya mahu teks kelihatan seperti ini (dibuat menggunakan paint.net): </p> <p>Perhatikan bahawa baris pertama teks dijajarkan dengan bahagian bawah huruf besar "S" tiga baris pertama berada di bahagian atas kawasan putih dalam imej dan baris empat hingga enam dijajarkan ke kiri dengan jidar; . </p> <p>Juga ambil perhatian bahawa <strong>teks mesti menutup bahagian putih imej</strong>. </p> <p>Juga ambil perhatian bahawa saya tidak dapat menjamin jumlah lebar teks ini akan menjadi EPUB dan boleh dilihat pada berbilang peranti. Oleh itu <code>position:absolute</code> pastinya harus dielakkan. </p> <p>Inilah HTML yang saya cuba setakat ini, hampir mengalih keluar CSS yang berkaitan sepenuhnya: </p> <pre class="brush:php;toolbar:false;"><p class="dropcap-para"> <img width=135 height=108 style="float:left" src="image002.jpg" <span class="funky-text">HE ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minima veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat Duis aute irure dolor in reprehenderit in Voluptate velit essence cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat tidak proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></pre> <p>Terima kasih. </p>
P粉415632319P粉415632319448 hari yang lalu554

membalas semua(2)saya akan balas

  • P粉458913655

    P粉4589136552023-09-06 18:37:28

    Adalah mustahil untuk memberikan nilai tertentu kerana kedudukan "S" dalam imej sebenar tidak diukur. Imej berikut digunakan dalam Contoh A, dan teknik yang sama digunakan untuk menambah imej baharu pada OP dalam Contoh B.

    rreeee rreeee
    rreeee rreeee

    .foreground 是浮动的，段落的文本环绕在它周围。 .background 位于所有内容下方，以便 .foreground 覆盖 .background 的 150 像素，并且段落文本位于 之上。背景.

    Set peraturan penting dijelaskan dalam contoh

    Contoh A

    .foreground
    .background

    Contoh B

    Width: 150px Height: 250px
    Width: 250px Height: 250px

    balas
    0
  • P粉176980522

    P粉1769805222023-09-06 11:03:29

    Diedit oleh OP: Saya telah mengedit jawapan ini supaya ia sangat hampir dengan perkara yang saya mahu, untuk memadankan kes penggunaan saya yang tepat.

    Salah satu pautan web yang dicadangkan oleh S.O. ("vertical-align-text-next-to-an-image") menyediakan idea (serta pautan lain (pengetahuan epub).
    Contoh yang kami siarkan menggunakan terjemahan transformasi.

    Terdapat faktor lain yang perlu dipertimbangkan apabila berkaitan dengan e-buku… Perlu diingat bahawa pengguna e-buku boleh menukar saiz fon dalam e-buku "boleh dialirkan semula" (yang kami anggap sebagai matlamat anda). Setiap pembaca e-buku boleh menetapkan saiz fon pilihan mereka secara berbeza. Anda perlu mengambil kira faktor ini juga. Mungkin pembaca mungkin memilih satu siri arahan @media untuk pelbagai saiz fon yang berpotensi. Sampel ini telah diuji dalam FF, Chrome, Edge.

    Untuk lebih bersedia untuk disesuaikan dengan projek anda:

    1. Tambah URL imej latar belakang anda.
    2. Tetapkan lebar/tinggi imej tepat dalam CSS.
    3. Tetapkan terjemahan transformasi untuk mencapai tahap yang anda inginkan.
    4. Tetapkan margin-bawah supaya baris teks bergerak di bawah imej untuk mengisi lebihan jurang.
    5. Bina "overbar" atas dalam CSS/Html untuk memenuhi keperluan anda. 

    html,
body {
  font-family: Arial, sans-serif;
  font-size: 1em;
  line-height: 1.4;
}

* {
  box-sizing: border-box;
}

.first {
  font-family: Arial, sans-serif;
  font-size: 1em;
  line-height: 1.4;
  margin: 0 0 0 0;
}

.dropcap {
  float: left;
  font-family: Arial, sans-serif;
  font-size: 5em;
  line-height: 1;
  margin-bottom: -0.5em;
  /*-- move margin after moving the image --*/
  margin-right: -0.95em;
  margin-top: -0.1em;

  position: relative;
  /*-- move image up/down --*/
  top: 40%;
  transform: translateY(-40%);
}

.bgi {
  background-image: url("https://i.stack.imgur.com/JlxL1.png");
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

  box-sizing: border-box;
  /*-- set image size --*/
  width: 135px;

  height: 108px;
}
    <section>
<p>&nbsp;</p><!--still need to factor in your overbar here-->
<p>&nbsp;</p>
<p class="first"><span class="dropcap bgi"></span>HE IS leaving today. orem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis.</p>
</section>

    balas
    0
  • Batalbalas